jquery - jQueryのターゲット要素内のネストされた要素でイベントハンドラーを防ぐ方法は？

Question

<tr>
  <td>
    <a></a>
  </td>
</tr>

さて、<tr>ノードにはイベントリスナーがあります$('tr').click(handler1)。<a>しかし、ノードがと同じ動作をすることは望ましくありません。

とにかくjQueryなしでそれを行うことができますか？

Answer 1

イベントハンドラーを a にも追加し、デフォルトを防止します

$(function(){
  $("tr a").click(function(e){
       e.preventDefault();
   });
});

アップデート：

リンクがデフォルトのアクションを実行し続けたいが、イベントが tr までバブルアップしたくない場合は、まだ打者に変更しe.stopPropagation();ますe.preventDefault();

Answer 2

jQueryを使用する代わりに、このようなものを見ることができます

document.getElementById('x').addEventListener('click', function(e){
    if(e.target.tagName == 'A'){
        alert('Clicked A')
    }else{
        alert('clicked tr')
    }
    }, false);

デモ:フィドル

jQuery の場合:

$('tr').on('click', function(e){
    if($(e.target).is('a')){
        alert('clicked a')
    } else {
        alert('clicked tr')
    }
})

デモ:フィドル

Answer 3

$('tr').click(function(e){    
     if($(e.target).is('#youranchorelementid')){ //you can use class also if you have many elements
    e.preventDefault();
    }

});

Answer 4

$('tr').click(function(e){
    e.preventDefault();
});