如何防止 jquery 函数运行？答案

【问题标题】：How can i prevent a jquery function from running?如何防止 jquery 函数运行？
【发布时间】：2021-02-16 14:15:23
【问题描述】：

我在一个类上绑定一个函数。我有一张带有“空白表”类的表。我在每个 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”类的跨度，我不喜欢更改颜色。在这种情况下，我不喜欢切换行的类。

绑定事件有排除选项吗？

谢谢

【问题讨论】：

标签： jquery event-handling click

【解决方案1】：

您当前的事件绑定到tr- 但您不能直接点击tr，只能点击它的内容，即tds 和divs 内的tr。

所以 jquery "bubbles" 将事件从被点击的地方向上移动，直到它得到一个事件处理程序。

在您的情况下，这将是 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还有其他答案更详细地解释了事件冒泡，但都是从概念的知识开始，而这引入了概念

【讨论】：