0

  • AJAX を介して div に読み込まれたコンテンツは、ユーザーがページをズームするまでクリックできません。これは、どこかでクリック可能なゾーン定義をリセットまたは再マップするようです。

  • 他の場合では、「クリック可能なゾーン」が少しずれて、入力フィールド/ボタン/リンクの下ではなく、間違った領域でマウスカーソルが変化することに気付くことがあります。

  • この問題は Chrome と Mozilla で見られます。私は IE を使用していませんが、そこでも発生します。

以上の症状から、何が原因と考えられるでしょうか？

これは、要素をロードするために使用しているコードです (コンテンツが効果的にロードされているため、関連性が高すぎるとは思えません)。

function reqHandler(xhr, section) {
    var x = xhr;
    var s = section;
    this.callback = function() {
        if (x.readyState == 4) {
            var ss = document.getElementById(s);
            if (ss != null) 
                ss.innerHTML = x.responseText;
            stripAndExecuteScript(x.responseText);
        }
    }
};


function loadInto(page,section, wait) {
    if (wait==null) wait = true;
    if (wait) makeWait(section);    
    xhr = createXMLHttpRequest();
    handler = new reqHandler(xhr, section);
    xhr.onreadystatechange = handler.callback;
    xhr.open("GET", page, true);
    xhr.send(null);
}

stripAndExecute は、ロードされたコンテンツの JavaScript を評価するためのものですが、使用されません。ロードされたコンテンツには単純なリンク タグとフォームがありますが、コードは次のとおりです。

function stripAndExecuteScript(text) {
    var scripts = '';
    var cleaned = text.replace(/<script[^>]*>([\s\S]*?)<\/script>/gi, function(){
        scripts += arguments[1] + '\n';
        return '';
    });

    if (window.execScript){
        window.execScript(scripts);
    } else {
        eval(scripts);  

    }
    return cleaned;
}

生成された div コンテンツの HTML:

<form id="users_form">
    <table>
        <colgroup><col width="65px">
        </colgroup><tbody><tr>
            <td colspan="2">Llene todos los campos</td>
        </tr>
        <tr>
            <td align="right">Nombre</td>
            <td><input class="text_field" name="name" value="" type="text"></td>
        </tr>
        <tr>
            <td align="right">E-Mail</td>
            <td><input class="text_field" name="email" value="" type="text"></td>
        </tr>
        <tr>
            <td align="right">Usuario</td>
            <td><input class="text_field" name="user" value="" type="text"></td>
        </tr>
        <tr>
            <td align="right">Contraseña</td>
            <td><input class="text_field" name="password" type="password"></td>
        </tr>
        <tr>
            <td align="right">Repita contraseña</td>
            <td><input class="text_field" name="password_confirm" type="password"></td>
        </tr>

        <tr class="type_display_block">
            <td align="right">Tipo</td>
            <td><select class="text_field" name="type" style="width:100%;">
                    <option value="0">Administrador</option>
                    <option value="1">Gerente</option>
                    <option value="2">Normal</option>
            </select></td>
        </tr><tr>       
            <td colspan="2"><a class="button" style="float: right;" href="javascript:void(0);" onclick="doDBinsert();"><img alt="Enviar" src="http://localhost/eclipse/mensajesInternos/img/check.png" height="25px" width="25px">Enviar
            </a></td>


        </tr>
    </tbody></table>
</form>

クリックできなくなる要素は、下部にある「Enviar」ボタンです。

注: jQuery は使用していません。

注2：「Enviar」リンクを次の行ではなく、選択の隣の次の列に配置すると、次のようになります。

<tr class="type_display_block">
            <td align="right">Tipo</td>
            <td><select class="text_field" name="type" style="width:100%;">
                    <option value="0">Administrador</option>
                    <option value="1">Gerente</option>
                    <option value="2">Normal</option>
            </select></td>

            <td colspan="2"><a class="button" style="float: right;" href="javascript:void(0);" onclick="doDBinsert();"><img alt="Enviar" src="http://localhost/eclipse/mensajesInternos/img/check.png" height="25px" width="25px">Enviar
            </a></td>


        </tr>

これは、TR ではなく TD で、要素「Enviar」が再びクリック可能になることです。実際に、Select コントロールが他のセクションでも間違ったオフセットの原因であることを発見しました。これは、Mozilla Firefoz および Chrome の Windows および Linux で再現可能です。

何かのバグ？...

4

0 に答える 0