我怎样才能阻止运行中的 jquery 函数？

Question

我在 class 上绑定了一个函数。我有一个 table 和一个 class “blanks-table”。我在每个 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:

<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>

如果我在行中单击，颜色将会改变。它很好用。但是我不想在单击带有 class“sh”的跨度时更改颜色。在这种情况下，我不想切换行的 class。

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

谢谢

Answer 1

您当前的活动已绑定到 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上还有其他答案对事件冒泡有更详细的解释，但都是从概念的知识开始的，而这里介绍的是概念

我怎样才能阻止运行中的 jquery 函数？

How can i prevent a jquery function from running?

jquery

click

event-handling

我怎样才能阻止 运行 中的 jquery 函数？

How can i prevent a jquery function from running?

jquery

click

event-handling

我怎样才能阻止运行中的 jquery 函数？