聚合物 – Shadow DOM事件如何定位？

发布时间：2020-12-14 21:13:08 所属栏目：资源来源：网络整理

导读：我试图通过 content来了解在DOM DOM中收到的事件是什么？元件.我正在阅读 Shadow DOM W3C Draft,我并不完全理解它,但听起来事件要从EventListener附件的角度“重新定位”. In the cases where event path is across multiple node trees,the event’s inform

我试图通过< content>来了解在DOM DOM中收到的事件是什么？元件.我正在阅读 Shadow DOM W3C Draft,我并不完全理解它,但听起来事件要从EventListener附件的角度“重新定位”.

In the cases where event path is across multiple node trees,the
event’s information about the target of the event is adjusted in order
to maintain encapsulation. Event retargeting is a process of computing
relative targets for each ancestor of the node at which the event is
dispatched. A relative target is a node that most accurately
represents the target of a dispatched event at a given ancestor while
maintaining the encapsulation.

和

At the time of event dispatch:

The Event target and currentTarget attributes must return the relative
target for the node on which event listeners are invoked

所以这里是一个简单的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

当我点击容器时,toElement: div#internal-container,y: 15,x: 82…} test.html:17 DIV internal-container test.html:20

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

>这是它应该工作的方式,并且
>如果是这样,是否有另一种方法可以将从轻量级DOM重新定位的事件重新定位到影子DOM？

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

解决方法

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

Is this the way it is supposed to work

是的.如果您在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的一部分.它在光明的dom和元素的目标中.重要的是要记住轻型DOM节点仍然在逻辑上位于主文档中.它们没有被移动到阴影dom中,只是在< content>处呈现.插入点.

顺便说一下,您的示例中有几个Polymerized修复：

> this.shadowRoot.querySelector(‘#internalcontainer’) – >这一点.$.internalcontainer.这个.$.ID是Polymer的“自动节点查找”功能.>您根本不需要使用addEventListener().相反,请使用< div id =“internalcontainer”on-click =“{{clickHandler}}”>.这是一个声明性事件处理程序.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!