Question

我的代码如下：

document.onmousedown = function(){
    alert('test');
}

现在，除了ID为“box”的元素外，点击应调用此函数，即相当于jQuery的.not()选择器。

jQuery代码将是：

$(document).not('#box').mousedown(function(){
     alert('test');
});

如何在不使用jQuery的情况下实现相同的目标？

编辑：我不想要jQuery代码，但我想要一个类似于Javascript中jQuery的.not()选择器的动作。

编辑：我正在创建一个类似addthis的小部件。这是一个10kb的文件，在选择文本时会显示弹出窗口。它不会使用jQuery。

在我的情况下，当选择文本时，会显示一个弹出窗口。当在窗口小部件以外的某处单击文档时，窗口小部件应该消失。

Answer 1

要正确执行此操作，您需要检查e.target || e.srcElement或其任何父母是否id === 'box'。

例如:(使用jQuery）

$(document).mousedown(function(e) {
    if ($(e.target).closest('#box').length)
        return;

    //Do things
});

没有jQuery：

function isBox(elem) {
    return elem != null && (elem.id === 'box' || isBox(elem.parentNode));
}
document.onmousedown = function(e) {
    e = e || window.event;
    if (isBox(e.target || e.srcElement))
        return;
    //Do things
};

或者，您可以处理mousedown元素的box事件并取消冒泡。

Answer 2

这是一种应该有效的方法：

document.onmousedown = function(e){
   var event = e || window.event;
   var element = event.target || event.srcElement;
   if (target.id !== "box") { alert("hi"); } 
}

或者如果您希望它可以使用不同的ID重复使用：

function myNot(id, callback) {
    return function (e) {
       var event = e || window.event;
       var element = event.target || event.srcElement;
       if (target.id !== id) { callback(); } 
    }
}

并使用它：

document.onmousedown = myNot("box", function () {
    alert("hi");
});

Answer 3

我想要做的最简洁的方法是设置document.onmousedown事件，然后暂停box.onmousedown事件上的事件传播。这样可以避免在整个文档中创建大量onmousedown个事件，并避免每次触发事件时都必须遍历节点的整个父层次结构。

document.onmousedown = function() {
    alert("Foo!");
};
document.getElementById("box").onmousedown = function(e) {
    alert("Bar!");
    if (e.stopPropagation) {
        e.stopPropagation();
    } else {
        e.cancelBubble = true;          
    }
};

如何实现jQuery的.not（）？

3 个答案: