jQuery的觸發事件，當點擊該元素

Question

$(document).click(function(evt) { 
    var target = evt.currentTarget; 
    var inside = $(".menuWraper"); 
    if (target != inside) { 
     alert("bleep"); 
    } 

}); 

我試圖找出如何讓這個如果用戶點擊某個DIV（menuWraper）之外，它會觸發一個事件..以外，我意識到我可以讓每次點擊觸發一個事件，然後檢查點擊的currentTarget是否與從$（「。menuWraper」）中選擇的對象相同。但是，這不起作用，currentTarget是HTML對象（？）和$（「。menuWraper」）是Object對象？我很困擾。

Answer 1

只需要您的menuWraper元素調用event.stopPropagation()，以便其點擊事件不會冒泡到document。

試試看：http://jsfiddle.net/Py7Mu/

$(document).click(function() { 
    alert('clicked outside'); 
}); 

$(".menuWraper").click(function(event) { 
    alert('clicked inside'); 
    event.stopPropagation(); 
}); 

• http://api.jquery.com/event.stopPropagation/

另外，你可以的return false;而不是使用event.stopPropagation();

Answer 2

最常見的應用在這裏被關上點擊文檔而不是在它從元素中來了，這要停止冒泡，像這樣：

$(".menuWrapper").click(function(e) { 
    e.stopPropagation(); //stops click event from reaching document 
}); 
$(document).click(function() { 
    $(".menuWrapper").hide(); //click came from somewhere else 
}); 

所有在這裏做的是阻止當它來自.menuWrapper元素時，點擊bubbling up（通過event.stopPrpagation()）。如果這個沒有發生，點擊來自其他地方，並且默認情況下它將達到document，如果它到達那裏，我們會隱藏這些.menuWrapper元素。

Answer 3

我不認爲文件將觸發click事件。嘗試使用body元素來捕獲click事件。可能需要檢查對...

Answer 4

試試這些..

$(document).click(function(evt) { 
    var target = evt.target.className; 
    var inside = $(".menuWraper"); 
    //alert($(target).html()); 
    if ($.trim(target) != '') { 
     if ($("." + target) != inside) { 
      alert("bleep"); 
     } 
    } 
}); 

Answer 5

，如果你有孩子元素，比如下拉菜單

$('html').click(function(e) { 
    //if clicked element is not your element and parents aren't your div 
    if (e.target.id != 'your-div-id' && $(e.target).parents('#your-div-id').length == 0) { 
    //do stuff 
    } 
}); 

Answer 6

我知道這個問題已經回答了，但我希望我的解決方案能幫助其他人

stopPropagation引起的問題在我的情況，因爲我需要click事件別的東西。而且，不是每個元素都應該導致div被點擊時關閉。

我的解決辦法：

$(document).click(function(e) { 
    if (($(e.target).closest("#mydiv").attr("id") != "mydiv") && 
     $(e.target).closest("#div-exception").attr("id") != "div-exception") { 
     alert("Clicked outside!"); 
    } 
}); 

http://jsfiddle.net/NLDu3/

Answer 7

此代碼將在問題打開菜單，將設置一個點擊監聽事件。當被觸發時，它將循環通過目標ID的父母直到找到菜單ID。如果沒有，則會隱藏菜單，因爲用戶在菜單外單擊了。我測試過它，它工作。

function tog_alerts(){ 
    if($('#Element').css('display') == 'none'){ 
     $('#Element').show(); 
     setTimeout(function() { 
      document.body.addEventListener('click', Close_Alerts, false); 
     }, 500); 
    } 
} 

function Close_Alerts(e){ 
    var current = e.target; 
    var check = 0; 
    while (current.parentNode){ 
     current = current.parentNode 
     if(current.id == 'Element'){ 
     check = 1; 
     } 
    } 
    if(check == 0){ 
     document.body.removeEventListener('click', Close_Alerts, false); 
     $('#Element').hide();   
    } 
} 

Answer 8

試試這個

$(document).click(function(event) { 

     if(event.target.id === 'xxx') 
      return false; 
     else { 
       // do some this here 
     } 

    }); 

Answer 9

$(document).click((e) => { 
    if ($.contains($(".the-one-you-can-click-and-should-still-open").get(0), e.target)) { 
    } else { 
    this.onClose(); 
    } 
}); 

Answer 10

function handler(event) { 
var target = $(event.target); 
if (!target.is("div.menuWraper")) { 
    alert("outside"); 
} 
} 
$("#myPage").click(handler);