javascript - 为什么点击事件会触发两次？

Question

有人能告诉我，为什么以下代码会触发两次事件: http://jsfiddle.net/m8heyzgz/3/请打开您的控制台，firefox 或 chrome 有控制台，然后查看结果你点击'div1'，然后事件遍历顺序将是:

• div3
• div2
• 分区1
• div3
• div2
• 分区1

据我所知，捕获阶段可以从上到下，冒泡阶段可以从目标节点到父节点。

我的问题是，为什么它会以相同的顺序触发 2 次？

HTML:

<div id="div1">
    <div id="div2">
        <div id="div3">
            <form>
                <ul>
                    <li>
                        <label>                            
                            <div>
                                <div>div1</div>                            
                            </div>
                            <div>
                                <div>div2</div>                            
                            </div>
                            <div>                                  
                                <input type="checkbox" name="div3" value="div3" />
                            </div>
                        </label>
                    </li>
                </ul>
            </form>
        </div>
    </div>
</div>

js:

var d1 = document.getElementById('div1');
var d2 = document.getElementById('div2');
var d3 = document.getElementById('div3');

var f = function(e) {
    console.log(e.currentTarget);
}

d1.addEventListener('click', f);
d2.addEventListener('click', f);
d3.addEventListener('click', f);

Answer 1

我。为什么顺序一样？

这两个波的顺序是相同的，因为您只能看到两个事件的冒泡阶段，而看不到捕获。如果你想看到捕获，你的 addEventListener's third parameter (useCapture) 应该是真的。

二。为什么开火 2 次？

1. 当您点击标签的内容时，标签会触发第一个点击事件。
2. 第二个点击事件是通过合成点击从标签的复选框触发的。

---

+1。什么是合成点击？

由程序代码而非输入设备发起的点击。 (它 fires a click event 。)

+2。为什么会出现合成点击？

因为是the run synthetic click activation steps algorithm的第4步.

+3。为什么这个算法是由浏览器运行的？

因为它尊重the W3C's recommendation :

“标签元素的(...) 激活行为(...) 应该与平台的标签行为相匹配。” “例如，在点击复选框标签选中复选框的平台上，点击标签 (...) 可能会触发用户代理在输入元素上运行合成点击激活步骤，就好像元素本身已被用户触发一样(...)”