Jquery：如何选择一个元素上的事件，但不包括其子元素？

Question

我想知道是否可以使用jquery选择器在元素上绑定事件，但不在其子元素上绑定。实际上，我有两个重叠的div，采用绝对定位，我希望检测到这两个div上相同的事件，但不会在顶部div的子元素上发生（我的意思是，我希望检测到事件是否发生在顶部div的透明部分，就像它发生在较低的div上一样）。

例如，在这里，#desktop和#apps互相叠加，具有相同的固定宽度和高度，我希望检测到：#desktop或#apps上的事件，但不在.stuff上。 HTML

<div id="desktop">

</div>
<div id="apps">
    <div class="stuff">
        test
    </div>
    <div class="stuff">
        test2
    </div>
</div>

JavaScript

$("#desktop, #global:not(its_CHildren?)").mousemove(function (mouse){
    // ...
}

如果选择器无法实现此功能，我考虑使用以下方法，这个方法可以令人满意地工作：

如果用选择器无法实现这个功能，我考虑采用以下方法，这个方法可以令人满意地工作：

$("#desktop, #apps").mousemove(function(mouse){
    $("#global stuff").mousemove(function() {
        return false;
    });
    // ...
});

- Jo Pango

Answer 1

处理程序仅绑定到父元素。问题是事件从子元素冒泡并触发附加到父元素的处理程序。

您可以测试event.target以查看它是否与this（绑定处理程序的元素）具有相同的值。

$("#desktop, #apps").mousemove(function(e){
     if( e.target === this ) {
        //run your code
     }
});

示例：http://jsfiddle.net/KAJhe/（打开你的控制台以查看代码何时记录所悬停元素的ID）

现在 if 中的代码仅在您将鼠标移动到父元素上而不是后代元素上时才触发。

- user113716

---

好的，非常感谢您的回答！我要么按照您的方法进行，要么使用我写的第二段代码！谢谢。 - Jo Pango

@Jo Pango：无论你做什么，都不要把 $("#global stuff").mousemove(function() { 放在另一个 mousemove 处理程序中。将它们放在外面，因为你只需要分配一次。按照你的方式做会不断地在鼠标移动时分配处理程序。 - user113716

哦，非常感谢您指出这个问题。最终，我尝试了 event.target，它运行良好。 - Jo Pango