Question

这里真的很简单的jquery问题，我还没有解决。我有以下html表

<table id="table-1">
    <tr>
        <td>Value 1</td>
        <td>Value 2</td>
        <td>
            <button id="btn-1" value="Go"></button>
        </td>
    </tr>
</table>

单击表格行时，我有以下事件监听器

$("table-1 tr").on(
   'click',
    function(e){
       if(button was clicked){ 
           //do some stuff 
       } else {
           //do different stuff
       }
    }
);

我希望每当选择表格行时都会触发此事件侦听器，但点击的项目是我的按钮时除外。我一直试图使用:not和.not()，但没有运气。有什么想法吗？

Answer 1

使用event.stopPropagation()，以防止事件冒泡到父元素。

$('#btn-1').click(function(event){
    event.stopPropagation();
})

Answer 2

基于您想要捕获元素类型的示例。

$("#table-1 tr").on('click', function (e) {
    var elementType = $(e.target).prop('nodeName');
    if (elementType == 'BUTTON') {
        console.log('buttonClick');
    } else {
        console.log(elementType);
    };
});

http://jsfiddle.net/ymy9cn71/

Answer 3

如果您专门在按钮上设置事件监听器怎么办？最具体的规则应适用。因此，如果单击该行，则会触发行事件，如果单击该按钮，则按钮事件将首先触发，然后父节点将运行。因此，您可以使用一个简单的变量来检查按钮是否已被选中。

Var gContext;

$("#btn-1"). on('click', function() { gContext = true });


$("table-1 tr").on(
   'click',
     function(e){
        if(button was clicke$("table-1 tr").on(
         'click',
         function(e){
               if(gContext === true){ 
               //do some stuff 
               } else {
              //do different stuff
          }
     }
  );d){ 
           //do some stuff 
        } else {
             //do different stuff
        }
      }
   );

在我的手机上做了这个，希望它格式正确。

Answer 4

以下代码检查事件目标的标记名称，以了解tr的哪一部分被点击。

＆＃13;

$('table').on('click', 'tr', function (e) {
  var i = $('table tr').index(this);
  var tag = e.target.tagName.toLowerCase();
  if (tag === 'button') {
    alert('go #' + i);
  }
  else {
    alert('select row #' + i);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>Value 1</td>
        <td>Value 2</td>
        <td><button>Go</button></td>
    </tr>
    <tr>
        <td>Value 1</td>
        <td>Value 2</td>
        <td><button>Go</button></td>
    </tr>
</table>

＆＃13;

从事件侦听器中排除按钮OnClick

4 个答案: