从事件监听器中排除按钮

Exclude Button From Event Listener OnClick

本文关键字：排除 按钮 监听器 事件      更新时间：2023-09-26

真正简单的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()，但没有运气。什么好主意吗?

根据您想要捕获元素类型的示例

$("#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/

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

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

如果您专门在按钮上设置事件侦听器会怎么样?应该采用最具体的规则。如果你点击行，那么行事件会触发，如果你点击按钮，那么按钮事件会首先触发，然后父程序会运行。因此，您可以使用一个简单的变量来检查按钮是否被选中。

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
        }
      }
   );

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

下面的代码检查事件目标的标签名称，以知道tr的哪个部分被点击了

$('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);
  }
});
<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>

相关文章：