Question

我在我的应用程序中使用以下jquery代码..

想法是当用户来到表单并单击屏幕上的任何按钮时单击按钮..

    <script> 
        $(document).ready(function() {
            $('form').focusin(function() {
                $(this).addClass('focused');
            });
            $(':not(form)').bind('click', function(e) {
                if (!$(e.target).parents('form.focused').length) {
                    form.getElementById("customerdetails").click();
                }
            });
        });
    </script>

这个脚本在forefox中工作得很好，但这在IE6中非常慢......我可能知道这个的原因吗？它在IE8中运行得更快......任何想法？

请建议在IE6中改进此功能

非常感谢，提前，插孔。

Answer 1

$(':not(form)').bind()

哎哟！您刚刚在页面上选择每个元素除了表单，并在每个元素上分别添加了click处理程序。这可能是一大堆元素（即使是<head>和<script>，click毫无意义。

这在任何地方都会很慢：你只是在其他浏览器中看不到它，因为它们的JS引擎通常比IE6更快。

在父元素上使用委托来捕获它下面的所有点击，检查每次点击时的选择器条件，而不是选择所有元素并改变它们：

$(document).delegate('*', 'click', function(e) {
    if (!$(e.target).is('form.focused *'))
        $('#customerdetails').focus();
});

[编辑：移动选择器测试;虽然委托:not(form.focused *)确实在jQuery中工作，但它有点顽皮，因为它不是标准的CSS3选择器。 CSS3只允许:not中的“简单选择器”。]

Answer 2

编写$(':not(form)').bind('click', ...)将遍历文档中除<form>标记之外的每个元素，并为每个元素添加单独的单击处理程序。
这可能非常慢。

相反，您应该在文档中添加一个click处理程序，并检查点击是否来自<form>标记，如下所示：

$(document).click(function(e) {
    var $target = $(e.target);
    if ($target.is('form.focused') || $target.closest('form.focused').length)
        return;

    form.getElementById("customerdetails").click();
});

Answer 3

您可能希望使用 delegate 附加一个处理程序，而不是将处理程序附加到所有非表单元素。此处理程序捕获所有点击事件，并决定要执行的操作。这将加快所有浏览器的速度。

$(document).ready(function() {
    $('form').focusin(function() {
        $(this).addClass('focused');
    });
    $(document).delegate("form:not(.focused) *", "click", function(){
       $('#customerdetails').focus();
    });
});

Answer 4

IE6的javascript引擎和DOM操作有时候非常慢。为了一次修改大量元素，它可能非常耗费资源。 IE6也有阻止更新控件的趋势，直到某些函数调用完成（这在动态更新选择列表时最明显，你经常需要使用setTimeout推迟执行）。非常讨厌。

我在使用JQuery选择器时给你的建议是，如果你没有使用id选择器，例如：

$("#myElement");

...总是尝试使用标签类型为任何选择器添加前缀，这将加快选择速度。当您使用id选择器时，jquery将使用浏览器本机getElementById函数。提供标签名称时，例如：

$("div.myElement");

jquery将使用本机getElementsByTagName函数来获得更快的列表。这比遍历整个DOM以尝试找到匹配元素要快得多。

要进一步前进，请尝试为选择器提供一个上下文。上下文基本上是开始搜索的起点。

在IE6中，Jquery工作得非常慢

4 个答案: