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

Question

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

例如,这里#desktop和#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只有当你没有将鼠标移动到父级而不是移动到后代元素上时,才会触发意志中的代码.