JS - 关于事宜托付中的事宜冒泡

2019年8月31日 160次阅读 来源: 澄海风

在运用 Datatables 表格插件开辟历程当中，给每一列的表头增加了自定义的列挑选功用，详细是给表头增加了一个可点击的图标，点击图标触发挑选，然则发明点击图标的时刻同时会触发 Datatables 自带的排序功用。

《JS - 关于事宜托付中的事宜冒泡》

html 构造以下：

  <th class="_name indicator title sorting" tabindex="0" aria-controls="table-abs" rowspan="1" colspan="1" style="width: 250px;" aria-label="项目名称: activate to sort column ascending">
      项目名称
      <!-- 列挑选图标 -->
      <i class="addSelect" data-column="1"><span class="icon-caret-down"></span></i>
  </th>

js 代码以下：

  // 点击列挑选图标
  $('.table-section').off('.customSearch').on('click.customSearch', 'th.title .addSelect', function (evt) {
    evt.stopPropagation();
    // dosomething ...
  });

这类事宜托付的事宜绑定体式格局，在这里涌现了事宜冒泡，虽然调用了 evt.stopPropagation(); ，但仍然会触发绑定在 th.title 上的排序事宜。

JS事宜代办不是基于事宜冒泡么，假如托付元素和目的元素之间另有元素绑定了雷同事宜，怎样阻挠事宜冒泡？ — 知乎

实际上，事宜托付的事宜处置惩罚函数是当被托付的元素上的事宜触发时推断e.target后实行，而不是目的元素上的事宜被触发后就马上实行，在没有阻挠冒泡的情况下，事宜照样一层层流传的，只是处置惩罚函数在事宜抵达那一层被触发的题目。依据事宜代办的划定规矩，点击li元素后，click事宜是从li至inner至outer一层层冒泡上去的，沿途触发各个元素上的事宜处置惩罚函数，假如我们将事宜托付在outer上，纵然调用了stopPropagation，也只是阻挠了事宜从outer向上冒泡，而之前的冒泡历程必然会触发inner上的click事宜，实行处置惩罚函数，然则假如将事宜托付在inner上，而且阻挠冒泡，阻挠的是从inner最先的冒泡，如许就能够阻挠inner及其先人元素上的click事宜被触发。

作者：echizen
链接：https://www.zhihu.com/questio…

    原文作者：澄海风
    原文地址: https://segmentfault.com/a/1190000018681534
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞