Jquery：元素上的事件的选择器，但不是它的子元素的选择器？

Question

我想知道是否可以使用jquery选择器绑定元素上的事件而不绑定其子元素。实际上，我有两个div，一个在另一个，绝对位置，我想在两个div上检测相同的事件，但不是如果事件发生在顶级div的孩子（我的意思是，我想检测事件是否在顶部div的透明部分，就好像它发生在较低的div上。

例如，在这里，＃desk和#apps是一个在另一个上，具有相同的固定宽度和高度，我想检测一个事件：#destop，或#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;
    });
    // ...
});

Answer 1

处理程序仅绑定到父元素。问题是事件从后代冒出来，并触发附加到父级的处理程序。

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

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

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

现在if中的代码只会在您没有将鼠标移到父级而不是后代元素上时触发。