盡管設置了 preventdefault，但事件單擊觸發了兩次

Question

有些人有這個問題，但我沒有看到任何適合我的答案。

這是 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 會顯示兩次，就好像該事件發生了兩次一樣。 如您所見，我停止了傳播，那怎么會發生呢？

謝謝

Answer 1

下面的 if 條件在循環內。

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

對每個不等於selection的element.id進行檢查。 那么有多少次，如果條件為真？ 2 一個用於id="xxxx" ，另一個用於id="yyyyy"

點擊事件僅觸發一次使用

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

Answer 2

顯示的代碼看起來不錯。 驗證您的事件處理程序實際上沒有添加兩次（在 Array.each 循環之前放置一個警報）

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

不過，這將是一種更 mootools-y 的方式。