檢查，如果點擊的元素之外的 - 在刪除的項目

-1

我試着用最接近jQuery的方式，來檢查，如果點擊是一個元素之外：檢查，如果點擊的元素之外的 - 在刪除的項目

$(document).click(function(event) { 
    if(!$(event.target).closest("#wrapper").length) { 
    console.log($(event.target)) 
    console.log("click outside of #wrapper"); 
    } 
}); 

$("#remove-me").click(function(){ 
    $(this).remove(); 
    console.log("remove me clicked"); 
}); 

$("#click-me").click(function(){ 
    console.log("click clicked"); 
}); 

<div id="wrapper"> 
    <div id="remove-me">click me to remove from dom</div> 
    <div id="click-me">click me</div> 
</div>

但如果我點擊#remove-me，該div被刪除從DOM - 現在在太空中的某個地方 - 它不會找到任何closest()。令人驚訝的是，document聽衆仍然得到點擊和元素，雖然它不在DOM中了...

如果這個div在我的包裝中，我該如何正確地找到一種方法。這是一個jQuery問題還是有一個純Javascript方法？爲什麼$(document).click()偵聽器仍然會在刪除的元素上觸發？

的一種方式，我發現來檢查div沒有parent() ...

Codepen例子：http://codepen.io/urtopal/pen/BLJgrQ

摘要/問題：

爲什麼是一個監聽器一個被移除的元素仍然被觸發（如果點擊了#remove-me，上面的例子「在#wrapper之外點擊就不應該被執行）？
如何解決這個問題？完全沒有觸發/或者如何檢查是否被移除？

來源

2016-10-06 urtopal

請把相關代碼（HTML）的問題。 –

我不清楚你在問什麼。當你刪除（）''＃刪除'它永遠消失了。該點擊處理程序將永遠不會再執行。 –

我不知道你在問什麼，一旦remove-me不見了，你只會得到click-me觸發器，因爲如果你點擊包裝器內部（除非你點擊包裝器外的空白區域），那麼沒有包裝器在包裝器之外，所以文檔綁定不會觸發。你想做什麼？澄清你正在努力實現的目標 – Huangism

-2

嘗試return false;在'click'處理程序結束，它會阻止事件冒泡的DOM，並停止執行其它裝訂處理器：

$("#remove-me").click(function(){ 
    $(this).remove(); 
    console.log("remove me clicked"); 
    return false; 
});

來源

2016-10-06 13:15:20

謝謝，幫助。點擊不會再冒泡，所以沒有別的東西會被觸發。 – urtopal

試試這個：

$(document).click(function(event) { 
 
    if($(event.target).prop("tagName").toLowerCase() == "html") { 
 
    console.log("click outside of #wrapper"); 
 
    } 
 
}); 
 
        
 
$("#remove-me").click(function(){ 
 
    $(this).remove(); 
 
    console.log("remove me clicked"); 
 
}); 
 

 
$("#click-me").click(function(){ 
 
    console.log("click clicked"); 
 
});

#wrapper { 
 
    background-color: #ccc; 
 
    padding: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div id="remove-me">click me to remove from dom</div> 
 
    <div id="click-me">click me</div> 
 
</div>

來源

2016-10-06 14:09:05

檢查，如果點擊的元素之外的 - 在刪除的項目

回答

相關問題