Question

所以我只想添加一些函数来悬停。下面的内容大致相同，除了带有for循环的那个我将目标存储在一个数组中。我其实有几个问题。

这是正确使用stopPropagation吗？
做这样的事情的最佳做法是什么？
以下哪种方法更快，使用的资源更少？
我知道我可以使用hover（）但我使用bind因为我认为它更快，我的想法是否正确？

谢谢

    for (var i in slides) {
        $(slides[i].el).bind( {
            mouseenter: function (event) {
                event.stopPropagation();
                // do something
            },
            mouseleave: function (event) {
                event.stopPropagation();
                //do something
            }
        });
    }

    $("#vehicleSlides .vehicleAreas").bind( {
        mouseenter: function (event) {
            event.stopPropagation();
            // do something
        },
        mouseleave: function (event) {
            event.stopPropagation();
            //do something
        }
    });

Answer 1

1 - 这是正确使用stopPropagation

如果你想阻止事件冒泡DOM树，那么是。

2 - 做这样的事情的最佳做法是什么

就个人而言，我更喜欢jQuery选择器后跟方法，但这只是一个偏好。最佳实践是您和您的团队一致同意和使用的任何风格。

3 - 以下哪种方法更快且使用更少的资源

实际上，两者之间几乎没有区别。

4 - 我知道我可以使用hover（）但我使用bind因为我认为它更快，我的想法是正确的

jQuery悬停方法是绑定到mouseenter和mouseleave事件的简写，因此使用悬停会有一个额外的函数调用，但性能几乎没有差异。

Answer 2

最佳做法会使一致正确的功能成为最高优先级，因此它取决于父节点在处理后是否应该看到或听到该事件。

这取决于你的设计。例如，在您希望能够拖动的“类似窗口”的对象中，您可以选择A.将鼠标处理程序附加到整个窗口，或者B.将侦听器附加到子“背景”对象以进行检测鼠标按下事件开始拖动。

如果您选择设计B.，那么您必须确保您不想接收鼠标事件的标签和其他对象禁用鼠标事件（在Flash [AS3]中将mouseEnabled和mouseChildren设置为false;不确定JavaScript ）。这种设计的一个缺点是它会阻止U.I中的任何物体。在冒泡阶段被动处理或修改事件行为，因为捕获阶段的任何拦截都会阻止它首先到达背景。这个设计的一个专家是，通过允许事件冒泡，你可以让监视器和其他全局效果处理更高级别的鼠标点击。

另一方面，如果您选择设计A.，那么您不必担心让子对象对鼠标透明（标签上的事件仍会冒泡到窗口容器本身），而是您必须确保在处理事件后停止子对象（如按钮）上的事件传播，以便它们不会到达层次结构顶部的窗口处理程序。这实际上取决于你希望它如何运作，混合方法可能是最好的。

你可以把它归结为设计科学，直到“设计”根本不是一个设计，而是一个科学上已知的复杂事实。

该系统的任何浏览器优化都涉及在捕获阶段期间跟踪哪些父节点具有为事件类型附加的气泡阶段事件处理程序。例如，如果它进入目标/冒泡阶段，知道没有父节点有处理程序，它可以跳过整个冒泡阶段，或直接跳转到已知有处理程序的节点。然而，这是糟糕的设计，IMO，因为您可能希望在捕获或冒泡期间随时将新处理程序附加到父节点，或者您可能希望将节点移动到另一个父节点以尝试使该事件冒泡出另一个父链。试一试，看看它在不同浏览器中的表现。在行为和性能方面，必然存在与其他任何涉及HTML呈现和事件处理的不一致：P

Answer 3

绑定和悬停之间可能没有太大区别。避免工作始终是一件好事，但是更多的函数调用来获取事件处理程序并不会影响现代JIT的性能。

你没有错误地调用stopPropagation，但如果你没有特别的原因这样做，除了冒泡让你感到不舒服，或者因为你害怕偶然触发别的东西，那么是的，你做错了。

UI工作的第一条规则应始终是：

不要做任何你不需要做的事

示例：

不要解决你还没有的问题。
不要做任何“以防万一”，因为这意味着你不知道实际发生了什么，你真的需要了解你的东西实际上做了什么以及它如何在你在UI中调用任何东西之前工作。
不要阻止人们使用与预期不同的UI。例如验证HTML格式并在有人试图使您编写的内容有所不同时抛出错误。你是什么，运行客户支持热线？它无助于任何人/无所事事。如果他们更喜欢一个更加语义正确的无序列表到一堆div，那有什么关系呢？

但是特别是在stopProp上，如果你必须使用它（并且它可以非常优雅地解决一些问题，所以永远不要说永远）尝试只使用它来命中端点节点，这样可以将其他东西添加到同一个容器中而不会失去冒泡。是的，我说的好处。不要害怕冒泡。如果您的HTML完全是一场灾难，那么向后移动祖先行的事件很可能会触发其他UI事件（它应该只是容器一直支持到正文，对吧？）。

另外，如果您在采取行动之前只能验证处理程序中是否有正确的目标元素，那么请执行此操作而不是stopProp。但是当人们将return false和e.stopPropagation添加到他们编写的每个UI处理程序时，它会让我感到很生气。特别是当他们自己从一个容器中拾取事件时，该容器包含的内容远远超过所讨论的活动元素。

所以不要这样做。我们有一天可能在同一个办公室工作，我可能会发牢骚和难以忍受，我会破坏你的芝士蛋糕。

使用jquery / javascript执行以下操作的最佳做法是什么？

3 个答案:

使用jquery / javascript执行以下操作的最佳做​​法是什么？

3 个答案:

使用jquery / javascript执行以下操作的最佳做法是什么？