如何防止 jquery 函数运行？

问题描述

我在一个类上绑定了一个函数。我有一个带有“空白表”类的表。我在每个 tr 上绑定了一个点击功能：

jQuery(function(){
    ieClick('.blanks-table tr','click');
});

function ieClick(h_list,h_class){
    if(!h_class) var h_class = 'click';
    jQuery(h_list).click(function(){
        jQuery(this).toggleClass(h_class)
    });
}

这是我的桌子：

<table class="blanks-table">
   <tr class="sum master">
      <td class="check-holder"><div class="blankcheck"><span class="toggle-show sh"></span></div></td>
      <td>Hello World</td>
   </tr>
</table>

如果我点击行，颜色会改变。它工作得很好。但是，如果我单击“sh”类的跨度，我不喜欢更改颜色。在这种情况下，我不喜欢切换行的类。

是否有绑定事件的排除选项？

谢谢

解决方法

您当前的事件绑定到 tr- 但您不能直接点击 tr，只能点击其内容，即 td 和 div在那个tr内。

因此 jquery 从点击事件处“冒泡”直到它获得事件处理程序。

在您的情况下，这将是 tr。

要防止特定元素发生这种情况，请添加第二个事件处理程序，然后从子事件处理程序调用 stopPropagation()（或 return false）。

$(".sh").click(function() {
    // either of these,as long as return false is last line
    event.stopPropagation();
    return false;
});

$("tr").click(() => { console.log("row clicked"); });
$(".sh").click(() => { return false; });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="blanks-table">
   <tr class="sum master">
      <td class="check-holder"><div class="blankcheck"><span class="toggle-show sh">no click area</span></div></td>
      <td>click here for row</td>
   </tr>
</table>

---

SO上还有其他答案更详细地解释了事件冒泡，但它们都是从概念的知识开始的，而这则介绍了概念