composedPath()
方法在
事件
interface returns the event’s path which is an array of the objects on which listeners will be invoked. This does not include nodes in shadow trees if the shadow root was created with its
ShadowRoot.mode
closed.
var composed = Event.composedPath();
None.
An array of
EventTarget
objects representing the objects on which an event listener will be invoked.
In our composed-composed-path example (see it live), we define two trivial custom elements,
<open-shadow>
and
<closed-shadow>
, both of which take the contents of their text attribute and insert them into the element's shadow DOM as the text content of a
<p>
element. The only difference between the two is that their shadow roots are attached with their modes set to
open
and
closed
分别。
The first definition looks like this, for example:
customElements.define('open-shadow',
class extends HTMLElement {
constructor() {
super();
let pElem = document.createElement('p');
pElem.textContent = this.getAttribute('text');
let shadowRoot = this.attachShadow({mode: 'open'})
.appendChild(pElem);
}
});
We then insert one of each element into our page:
<open-shadow text="I have an open shadow root"></open-shadow> <closed-shadow text="I have a closed shadow root"></closed-shadow>
Then include a click event listener on the
<html>
元素：
document.querySelector('html').addEventListener('click',function(e) {
console.log(e.composed);
console.log(e.composedPath());
});
When you click on the
<open-shadow>
element and then the
<closed-shadow>
element, you'll notice two things. First, the
composed
property returns
true
beause the
click
event is always able to propagate across shadow boundaries. Second, you'll notice a difference in the value of
composedPath
for the two elements. The
<open-shadow>
element's composed path is this:
Whereas the
<closed-shadow>
element's composed path is a follows:
In the second case, the event listeners only propagate as far as the
<closed-shadow>
element itself, but not to the nodes inside the shadow boundary.
| 规范 | 状态 | 注释 |
|---|---|---|
|
DOM
The definition of 'composedPath()' in that specification. |
实时标准 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
composedPath
|
Chrome
53
|
Edge 79 | Firefox 52 | IE 不支持 No |
Opera
40
|
Safari 10 |
WebView Android
53
|
Chrome Android
53
|
Firefox Android 52 |
Opera Android
41
|
Safari iOS 10 |
Samsung Internet Android
6.0
|
完整支持
不支持
使用非标名称。
事件