如何將click事件綁定到文檔，以便僅在未單擊任何對象時才觸發

Question

我希望每當單擊DOM元素以外的內容時觸發一個事件，而當單擊圖像時觸發一個單獨的事件。

現在我有：

$( document ).click( function() { /*do whatev*/ } );

在另一個地方：

$( "img" ).click( function( e ) { 
  e.stopPropagation();
  /*do whatev*/
} );

這是行不通的。 這兩個事件都被觸發。 還有其他想法嗎？

Answer 1

簡單明了：

jQuery(document).click(function(event) {
  if (jQuery(event.target).is('img'))
  {
    alert('img');
  }
  else
  {
    // Reject event
    return false;
  }
});

如果用戶單擊img元素，則會提示“ img”，否則將停止單擊事件。

Answer 2

像這樣的東西：

$('*').click(function(ev) {
    ev.stopPropagation();
    if ($(this).is('img')) alert('img');
    else if($(this).is('div')) alert('div');
    else alert('something else');
});

http://www.jsfiddle.net/U2Szn/ ？

Answer 3

這應該可以，但是僅img是不夠的。 它可能是從img容器觸發的。 我認為您需要一個選擇器，例如$('p,div,img,a,input,textarea,span,ul,ol,dl,li,dd,dt,table,tr,td')和任何其他標簽可以想到將其完成。 這可能存在性能問題。

Answer 4

如果您希望在單擊html和/或body或單擊img時觸發事件，則應執行以下操作： 實時示例

$(document).click(function(e) {
  if($(e.target).is('html')){
    alert('this is the html element');
  }else if($(e.target).is('body')){
    alert('this is the body element');
  }
});
$("img").click(function(e) {
    e.stopPropagation();
    alert('img')
});​