尽管设置了 preventdefault，但事件单击触发了两次答案

【问题标题】：Event click trigged twice though preventdefault is set尽管设置了 preventdefault，但事件单击触发了两次
【发布时间】：2019-11-15 15:21:14
【问题描述】：

有些人有这个问题，但我没有看到任何适合我的答案。

这里是html：

<div id="page">
  ......
  <ul>
    <li role="presentation">
      <a id="selection"...... ></a>
    </li>
    <li role="presentation>
      <a id="xxxx"></a>
    </li>
    <li role="presentation">
      <a id="yyyyy"></a>
    </li>
  </ul>
 .......
</div>

这里是使用 Mootools 的 javascript（没有选择）：

window.addEvent('domready', function() {
   var myDivPage = document.id('page');
   var as = myDivPage.getElements('li[role=presentation] a');

   //as is an array of 3 elements

   Array.each(as, function(element, index) {
      if(element.id !== 'selection') {
            element.addEvent("click", function(event) {
                event.preventDefault();
                event.stopPropagation();
                alert("did you save?");
            });
       } 
   });

 });

该事件确实是附加的，但是当我单击我的链接时，alrt 会显示两次，就好像该事件发生了两次一样。如您所见，我停止了传播，那怎么会发生呢？

谢谢

【问题讨论】：

添加stopImmediatePropagation而不是stopPropagation有什么意义
我没有 Mootools，所以测试你的例子对我来说是不可能的。您是否尝试在每个新作用域的开头放置一个 console.log(...) 行，以查看每个作用域被调用了多少次？您可能会多次插入事件处理程序。一种可能的解决方案是清除现有的 onclick 处理程序，但您需要命名的单击处理程序或克隆元素才能使用普通的 vanilla javascript 执行此操作。 stackoverflow.com/a/9251864/9035707 -- 更好的选择是弄清楚为什么它被添加了两次。

标签： javascript events mootools

【解决方案1】：

下面的 if 条件在循环内。

if(element.id !== 'selection')

检查每个不等于selection 的element.id。那么有多少次，如果条件为真呢？ 2 一个用于id="xxxx"，另一个用于id="yyyyy"

点击事件只触发一次使用

if(element.id === 'selection')

【讨论】：

【解决方案2】：

显示的代码看起来不错。验证您的事件处理程序实际上没有添加两次（在 Array.each 循环之前放置一个警报）

$$('#page li[role=presentation] a:not(#selection)').addEvent("click",
   function(event) { event.stop(); alert("Did you save?"); })

不过，这会是一种更加mootools-y的方式。

【讨论】：