如何實現jQuery的.not（）？

我有這樣的代碼：如何實現jQuery的.not（）？

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

現在，除了在ID爲「盒子」的元素，點擊要調用這個函數，即jQuery的.not()選擇的等價物。

jQuery的代碼將是：

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

如何能夠做到同樣的事情，而不使用jQuery？

編輯：我不想jQuery代碼，但我想要一個類似於JavaScript中的jQuery的.not()選擇器的操作。

編輯：我正在製作一個addthis-like部件。這是一個10kb的文件，當選擇文本時將顯示一個彈出窗口。它不會使用jQuery。

在我的情況下，當選擇一個文本時，彈出窗口顯示。當文檔被點擊而不是部件時，部件應該消失。

來源

2010-07-13 Aakash Chakravarthy

jQuery是Javascript。此外，該jQuery代碼將無法正常工作。 – SLaks 2010-07-13 17:27:38

爲什麼你不想要jQuery？ – SLaks 2010-07-13 17:34:08

@Slaks請參閱編輯2 – 2010-07-13 17:45:58

爲了正確地做到這一點，您需要檢查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元素和取消冒泡。

來源

2010-07-13 17:28:36 SLaks

+1，並且非常感謝你的答謝Slaks，你真的太棒了！ – 2010-07-13 18:09:38

這裏是一個應該工作的一種方式：

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"); 
});

來源

2010-07-13 17:30:59

我可以想出的最簡潔的方法是設置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;   
    } 
};

來源

2010-07-13 17:53:34

如何實現jQuery的.not（）？

回答

相關問題