Question

我在HTML表格的$top_message = nl2br(trim($top_message));标签内创建一个按钮。

我添加了一个侦听器，以在点击事件触发警报。

HTML表的<td>标记同样适用于事件侦听器，并通过单击按钮上的不同文本触发警报。

下面的代码段说明了上述情况。

<td>

$("#mytable").on("click", "td", function() {
    alert('this is td');
});  
   
$("#mybutton").on("click", function() {
    alert('this is button');
});

如何有效地执行按钮上的click事件而不触发包含按钮的<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <table id="mytable"> <tr> <td style="border: 1px solid black; width: 500px; height: 20px"> <span>table</span> <button style="margin: 5px; padding:5px; border: 1px solid black; float: right" id="mybutton"> display</button> </td> </tr> </table>标签的click事件？

Answer 1

在单击按钮消耗掉click事件之后，必须停止传播click事件。这是通过在事件上调用 stopPropagation（）函数来完成的。否则-根据您的经验-事件将传播到下一个元素。

这是一个例子：

 $("#mytable").on("click", "td", function() {
     alert('this is td');
   });
   
   
 $("#mybutton").on("click", function(event) {
   event.stopPropagation();
     alert('this is button');
   });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table id="mytable">
<tr>
  <td style="border: 1px solid black; width: 500px; height: 20px">test
  <button style="margin: 5px; padding:5px; border: 1px solid black; float: right" id="mybutton"> display</button>
  </td>
</tr>
</table>

Answer 2

出于记录目的，我更喜欢默默无闻的方法，如果可能的话。但是，这将防止发生由点击触发的 all 进一步事件。如果点击涉及多个事件，而您只想定位要忽略的特定事件，则可能需要类似以下内容的方案...

(function($){
    // creating variables for the event handlers, for cleaner code below
    let tdEvtHandler = function() {
     alert('this is td');
   };

   let bindTd= function() {
     $("#mytable").on("click", "td", tdEvtHandler);
   };

   let btnEvtHandler = function() {
     // The button's evt handler will take precedence when
     // the button is clicked, so you can disable just the
     // td's evt handler at this point, do your work, then
     // re-enable the td's evt handler.  Re-binding needs to
     // be done with a timeout to allow the current event
     // chain to complete before (re)binding takes place.

     $("#mytable").off("click", "td", tdEvtHandler);
     alert('this is button');
     setTimeout(bindTd);
   };

   bindTd();
   $("#mybutton").on("click", btnEvtHandler);
})(jQuery);

重叠onClick（）事件表中的元素

2 个答案: