Question

我在document.body上设置了一个eventListener捕获所有事件，使用Shadow Dom添加了一些小部件，我也希望捕获这些事件。

e.target for shadow内的事件仅在shadowroot本身设置了事件时才可用，因此被迫创建第二个事件。

这会创建一个场景，其中两个事件以随机顺序触发，应用程序失败。

是否存在一些处理此场景的模式，如果同时触发，则仅发出shadowroot事件？

要测试的脚本

<script>

addShadow = function(){
    var d = document.createElement('div')
    var p = document.createElement('p')
    p.textContent = 'target me';
    d.attachShadow({'mode' : 'open'});
    d.shadowRoot.appendChild(p);
    document.body.appendChild(d);
    document.body.addEventListener('click', function(e){
      console.log('body click');
      console.log(e.target);
    })

    d.shadowRoot.addEventListener('click', function(e){
      console.log('shadowClick');
      console.log(e.target);
    })
}

addShadow();

</script>

DOM Shadow添加事件

0 个答案: