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？
如果有人想问,“你想做什么？”,除了理解这种行为之外,我不是要做任何具体的事情.
解决方法
- 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}}”>.这是一个声明性事件处理程序.
