如何定位<content>下的Shadow DOM事件？-Java 学习之路

我试图通过一个 <content> 元素来理解在DOM DOM中发生什么事件 . 我正在阅读Shadow DOM W3C Draft，我并不完全理解它，但从EventListener附件的角度来看，事件似乎是"retargeted" .

在事件路径跨多个节点树的情况下，调整事件的事件目标信息以保持封装 . 事件重定向是计算调度事件的节点的每个祖先的相对目标的过程 . 相对目标是在保持封装的同时最准确地表示给定祖先处的调度事件的目标的节点 .

和

在事件发送时：Event target和currentTarget属性必须返回调用事件侦听器的节点的相对目标

所以这里是一个简单的Polymer自定义元素，只是将其子项放入容器中，并向容器添加一个ClickListener（在shadow DOM中） . 在这种情况下，孩子是一个按钮 .

<!DOCTYPE html>
<html>
  <head>
    <script src="bower_components/platform/platform.js"></script>
    <link rel="import" href="bower_components/polymer/polymer.html">
  </head>
  <body unresolved>
    <polymer-element name="foo-bar">
      <template>
        <div id="internal-container" style="background-color:red; width:100%;">
          <content></content>
        </div>
      </template>
      <script>
       Polymer("foo-bar", {
         clickHandler: function(event) {
           console.log(event);
           var element = event.target;
           while (element) {
             console.log(element.tagName, element.id);
             element = element.parentElement;
           }
         },

         ready: function() {
           this.shadowRoot.querySelector('#internal-container').addEventListener('click', this.clickHandler);
         }
       });
      </script>
    </polymer-element>

    <foo-bar id="custom-element">
      <button>Click me</button>
    </foo-bar>
  </body>
</html>

当我在Chrome 38.0.2075.0金丝雀上运行时，当我点击按钮时，我得到：

MouseEvent {dataTransfer: null, toElement: button, fromElement: null, y: 19, x: 53…}altKey: falsebubbles: truebutton: 0cancelBubble: falsecancelable: truecharCode: 0clientX: 53clientY: 19clipboardData: undefinedctrlKey: falsecurrentTarget: nulldataTransfer: nulldefaultPrevented: falsedetail: 1eventPhase: 0fromElement: nullkeyCode: 0layerX: 53layerY: 19metaKey: falsemovementX: 0movementY: 0offsetX: 45offsetY: 10pageX: 53pageY: 19path: NodeList[0]relatedTarget: nullreturnValue: truescreenX: 472screenY: 113shiftKey: falsesrcElement: buttontarget: buttontimeStamp: 1404078533176toElement: buttontype: "click"view: WindowwebkitMovementX: 0webkitMovementY: 0which: 1x: 53y: 19__proto__: MouseEvent test.html:17
BUTTON  test.html:20
FOO-BAR custom-element test.html:20
BODY  test.html:20
HTML  test.html:20

当我点击容器时，我得到：

MouseEvent {dataTransfer: null, toElement: div#internal-container, fromElement: null, y: 15, x: 82…} test.html:17
DIV internal-container test.html:20

所以我在light或shadow DOM中获得了一个事件目标，具体取决于源元素所在的DOM . 我希望在两种情况下都能从shadow DOM获取一个目标，因为这是EventListener附加的地方 . 我的问题是：

这是它的工作方式吗？
如果是这样，是否有另一种方法可以将从轻型DOM重新定位的事件重新定位到影子DOM？

如果有人想问，“你想做什么？”，除了理解这种行为之外，我不是要做任何具体的事情 .

1 回答

13
影子dom的事件很棘手 . 我试着捕捉下面的一个题库 .

这是它应该工作的方式

是的 . 如果您在Chrome中进行测试，则会获得原生阴影 .

我在HTML5Rocks - Shadow DOM 301文章中写了一个关于事件重定向的部分 . 基本上，重新定位意味着源于阴影dom的事件看起来像是来自元素本身 .

在您的示例中，您将事件记录在阴影dom内部，因此它仍然可以在那里看到 . 如果您还在元素之外添加“click”侦听器，则目标看起来好像来自元素：
```
<script>
  var el = document.querySelector('#custom-element');
  el.addEventListener('click', function(e) {
    console.log(e.target.tagName); // logs FOO-Bar
  });
</script>
```
http://jsbin.com/womususe/1/edit

'click'事件泡沫 . 这就是您在顶部示例中看到 BUTTON 的原因 . 为什么你会看到它？你看到了它，因为按钮不是光dom中元素's shadow dom. It'的一部分，也是元素的目标 . 它's important to remember that light DOM nodes are still logically in the main document. They'没有移动到阴影dom，只是在 <content> 插入点渲染 .

顺便说一下，您的示例中有几个Polymerized修复：
- this.shadowRoot.querySelector('#internalcontainer') - > this.$.internalcontainer . this.$.ID 是Polymer的"automatic node finding"功能 .
- 您根本不需要使用 addEventListener() . 而是使用 <div id="internalcontainer" on-click="{{clickHandler}}"> . 这是一个声明性事件处理程序 .
回复于 2024-04-28T23:51:06+08:00

如何定位<content>下的Shadow DOM事件？

1 回答

相关问题