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>

也就是说，在 TD 而不是 TR 中，元素“Enviar”可以再次点击。实际上，我发现 Select 控件也导致其他部分的偏移量错误。这可以在 Mozilla Firefoz 和 Chrome 中的 windows 和 linux 下重现。

某种虫子？...

4

0 回答 0