文档上绑定的点击事件不会触发某些元素答案

【问题标题】：click events binded on document are not triggering for some elements文档上绑定的点击事件不会触发某些元素
【发布时间】：2021-01-08 09:35:20
【问题描述】：

在我们的项目中，我在文档上绑定了点击事件

$(document).on('click', function(e){
     // some block of code
    });

我们的团队最近开始使用基础 js（5.3 版），我们的项目 html 将包含一些基础类，如基础选项卡等。

早期的点击事件不会在具有基础类的元素上触发

<li>
      <a href="javascript:void(0);" id="undoIcon"><i class="create-icon-undo"></i></a> 
    <p>Undo</p>
    </li>  ------------ when clicked on this , event is firing

但是

<li class="has-dropdown">
      <a href="javascript:void(0);" id="saveIcon"><i class="create-icon-save"></i></a><p>Save</p>
</li> -------------- when clicked on this foundation clicks are firing but the event binded on document is not firing.

还有一些元素有同样的问题，其中一个模板有与基础标签相关的html。

所以有任何方式可以触发点击。我是这样触发基金会的

$(document).ready(function(){
            $(document).foundation();
        });

提前致谢

【问题讨论】：

标签： javascript html jquery zurb-foundation

【解决方案1】：

找了好久，终于找到了根本原因。在 Foundation5 中，当一个事件被触发时，它会检查目标是否有一些像 has-dropdown 这样的类。

如果满足这些条件，Foundation5 将从那里停止使用 event.stopImmediatePropagation().

这就是原因，绑定在文档上的事件没有传播。

在 Foundation6 中，所有这些 stopImmediatePropagations 都被删除了，所以没有问题。

【讨论】：