确定DOM事件冒泡中的事件路径 [英] determine event path in DOM Event bubbling
问题描述
我正在尝试找出一个事件冒泡的路径。例如，我有一个标记，如
< div id =containeronclick =func>
< div id =div1>< / div>
< div id =div2>
< div id =div2.1>< / div>
< span id =span2.2>< / span>
< div id =div2.3>
< button id =btn2.3.1>< / button>
< / div>
< / div>
< / div>
现在如果btn2.3.1被点击，我希望看到事件已经冒泡的整个路径这是btn2.3.1 - > div2.3 - > div2 - > container。有没有办法只在容器上放置一个处理程序呢？ （没有Jquery请）
我发现一个event.path数组。这是什么，但没有找到很多细节它是跨浏览器？实现这一点的正确方法是什么？
event.path
从 whatwg ：
如果事件的目标属性值正在参与一个树，则让事件路径以树形顺序为其所有祖先的静态有序列表，并将事件路径设为空列表。
编辑/插入：
Dis /未覆盖在聚合物项目文档，并通过一个HTML5Rocks文章：
这似乎是<$ c的扩展名$ c> event interface仅限展示sed通过 Web组件 Shadow DOM
只有在这方面这是标准（显然）。
尽管没有很多文档可用（我们必须写入它）; - ）
截至2016年1月23日，所有浏览器中都未显示（默认情况下）。
但基本上：
var red = document.getElementById（red），green = document.getElementById（green），msg = document.querySelector（p）; red.addEventListener（click，function（evt）{msg.textContent ='+ evt.target.id +戳，'绿'是+ //访问事件路径（〜evt .path.indexOf（绿色）？ ：not）+在路径中;}，false）;
div {display：inline-block; min-width：20px; min-height：20px; padding：20px 40px 20px 20px; text-align：center;游标：指针} #red {background：red; } #green {background：green; } #blue {background：blue; } p {font：20px Consolas; }
<！DOCTYPE html>< html>< ;主体> < div id =red> < div id =green> < div id =blue>< / div> < / DIV> < / DIV> < p>< / p>< / body>< / html>
换句话说：路径是以 Array 的形式的家谱。 p>
另一个编辑/插入：
另一个关于使用路径的问题 被回答，建议使用 compiledPath 我不太了解。
I am trying to find out the path through which an event has bubbled. For example , I have a mark up like
<div id="container" onclick="func">
<div id="div1"></div>
<div id="div2">
<div id="div2.1"></div>
<span id="span2.2"></span>
<div id="div2.3">
<button id="btn2.3.1"></button>
</div>
</div>
</div>
Now if btn2.3.1 was clicked, I wish to see the entire path the event has bubbled up through which is btn2.3.1 -> div2.3 -> div2 ->container . Is there a way of doing this with only putting a handler on the container ? (No Jquery please)
I found a event.path array.Which does this stuff, but couldn't find much details about it.Is it cross browser? What is the correct way to achieve this ?
event.path
From whatwg:
If event’s target attribute value is participating in a tree, let event path be a static ordered list of all its ancestors in tree order, and let event path be the empty list otherwise.
EDIT / INSERT:
Dis/Un-covered by a note in the polymer project documentation and via an HTML5Rocks article:
This appears to be an "extension to the event interface" only exposed via the Web Component Shadow DOM.
It is standard only in this respect (apparently).
Although not a lot of documentation seems available yet (we have to write it ;-)
As of 23rd Jan 2016, this isn't exposed (by default) in all browsers.
But basically:
var red = document.getElementById( "red" ),
green = document.getElementById( "green" ),
msg = document.querySelector( "p" );
red.addEventListener( "click", function( evt ) {
msg.textContent = "'" + evt.target.id + "' got poked, and 'green' was" +
// access to the event path
( ~evt.path.indexOf( green ) ? "" : "n't" ) +
" in the path.";
}, false );
div { display: inline-block; min-width: 20px; min-height: 20px;
padding: 20px 40px 20px 20px; text-align: center; cursor: pointer; }
#red { background: red; }
#green { background: green; }
#blue { background: blue; }
p { font: 20px Consolas; }
<!DOCTYPE html><html><body>
<div id="red">
<div id="green">
<div id="blue"></div>
</div>
</div>
<p></p>
</body></html>
In other words: path is a family tree in the form of an Array.
ANOTHER EDIT / INSERT:
Another question about the use of path was answered with a suggestion to use composedPath which I know little about.
这篇关于确定DOM事件冒泡中的事件路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
