如何對兒童

Question

點擊時忽略單擊事件

所以，我有以下情形：

<div id="block"> 
Sample text. 
<a href="#">Anchor link</a> 
</div> 

<script type="text/javascript"> 
    $("#block").click(function() { alert('test'); }); 
</script> 

當我點擊的div內的任何地方，我發現了「測試」的警報。但是，我想要防止發生這種情況，當我點擊「錨鏈接」。我怎樣才能實現呢？

謝謝

Answer 1

您可以停止從鏈接冒泡了一個額外的處理器，這樣的點擊次數：

$("#block a").click(function(e) { e.stopPropagation(); }); 

在我們的意見在討論替代：

$("#block").delegate('a', 'click', function(e){ e.stopImmediatePropagation(); }) 
      .click(function() { alert('test'); });​ 

這將防止任何兒童冒泡鏈接（當然，不是真的，但是從執行的處理程序），但不是對每個元素創建一個處理程序，這是通過.stopImmediatePropagation()完成。

Answer 2

這就是你需要的：http://api.jquery.com/event.target/。

只是相比較，以檢查是否元素被你想要的元素或它的一個子觸發。

Answer 3

您可以測試與單擊事件對象的target財產節點：

$("#block").click(function(event) { 
    if(event.target.nodeName != 'A') { 
     alert('test'); 
    } 
}); 

我建議閱讀Event Properties from quirksmode.org。

Answer 4

$("#block").click(function(event) { 
    if($(event.target).attr('id') == $(this).attr('id')) 
    { 
     alert('test'); 
    } 
}); 

Answer 5

這裏是一個演示（jsfiddle）用表格和兩個字段：

<div id="container"> 
    <form> 
     <div class="field"> 
      <input id="demo" type="text" name="demo" /> 
     </div> 
     <div class="field"> 
      <input id="demo2" type="text" name="demo2" /> 
     </div> 
    </form> 
</div> 

的代碼看起來是這樣的：

$(document).ready(function() { 
    $('#container').click(function(evt) { 
     if(this == evt.target) { 
      console.log('clicked container',evt.target); 
      $('#demo').focus(); 
     } else { 
      console.log('clicked child -> ignoring'); 
     } 
    }); 

    $('.field').click(function(evt) { 
     if(this == evt.target) { 
      console.log('clicked field div',evt.target); 
      $(this).find('input').focus(); 
     } else { 
      console.log('clicked child -> ignoring'); 
     } 
    }); 
}); 

您可以單擊包含表單的容器將焦點設置在第一個輸入字段或輸入字段後面以將焦點置於其中。

如果你點擊進入該領域，然後點擊將被忽略。

上面的代碼工作，因爲jQuery的調用事件處理程序之前分配DOM節點this，所以你可以很容易地檢查通過檢查

this == evt.target 

CSS當前事件是否由DOM節點發布：

#container { 
    width: 600px; 
    height: 600px; 
    background: blue; 
} 

.field { 
    background: green; 
}