獲取 Web 組件內的事件目標

Question

錨元素 ( <a> ) 在用戶與 Web 組件交互時創建。 問題是，當單擊錨點時，我無法從 Web 組件的“外部”返回錨點元素。

我添加了一個事件監聽器來document監聽點擊事件。 當單擊 DOM 中某處的元素時，我希望e.target是被單擊的元素。 在 Web 組件內某處單擊的情況下，將返回自定義元素 ( <fancy-list></fancy-list> ) - 而不是單擊的元素。

當 shadow DOM 的模式設置為open ，DOM 應該是可訪問的。

 class Fancylist extends HTMLElement { constructor() { super(); const shadow = this.attachShadow({ mode: 'open' }); const wrapper = document.createElement('div'); wrapper.innerHTML = `<ul></ul><button>Add item</button>`; shadow.appendChild(wrapper); this.on_root_click = this.on_root_click.bind(this); } connectedCallback() { this.ul_elm = this.shadowRoot.querySelector('ul'); this.shadowRoot.addEventListener('click', this.on_root_click, false); } on_root_click(e){ switch(e.target.nodeName){ case 'BUTTON': this.ul_elm.innerHTML += '<li><a href="p1">List item</a></li>'; break; case 'A': e.preventDefault(); console.log('You clicked a link!'); break; } } } customElements.define('fancy-list', Fancylist);

 <!DOCTYPE html> <html> <head> <title>List</title> <meta charset="utf-8" /> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', e => { document.body.addEventListener('click', e => { //console.log(e.composedPath()); console.log(e.target); // why is this not returning an anchor element when an anchor is clickend inside the <fancy-list>? }, false); }, false); </script> </head> <body> <h1>List</h1> <fancy-list></fancy-list> </body> </html>

Answer 1

Shadow DOM 的目的正是為了從容器的角度屏蔽Shadow DOM 的 HTML 內容。

這也是為什么重新定位內部事件以暴露 Shadow DOM 主機的原因。

但是，您仍然可以通過獲取Event.path Array 屬性的第一項來獲取真正的目標。

event.path[0]

注意：當然它只適用於open Shadow DOM。

 class Fancylist extends HTMLElement { constructor() { super(); const shadow = this.attachShadow({ mode: 'open' }); const wrapper = document.createElement('div'); wrapper.innerHTML = `<ul></ul><button>Add item</button>`; shadow.appendChild(wrapper); this.on_root_click = this.on_root_click.bind(this); } connectedCallback() { this.ul_elm = this.shadowRoot.querySelector('ul'); this.shadowRoot.addEventListener('click', this.on_root_click, false); } on_root_click(e){ switch(e.target.nodeName){ case 'BUTTON': this.ul_elm.innerHTML += '<li><a href="p1">List item</a></li>'; break; case 'A': e.preventDefault(); break; } } } customElements.define('fancy-list', Fancylist);

 <!DOCTYPE html> <html> <head> <title>List</title> <meta charset="utf-8" /> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', e => { document.body.addEventListener('click', e => { console.log(e.path[0]); }, false); }, false); </script> </head> <body> <h1>List</h1> <fancy-list></fancy-list> </body> </html>

2021 年更新

正如現在評論的那樣，您應該使用event.composedPath() 。

獲取 Web 組件內的事件目標

問題描述

1 個解決方案

解決方案1
11 已采納 2019-09-16 20:15:35

獲取 Web 組件內的事件目標

問題描述

1 個解決方案

解決方案1 11 已采納 2019-09-16 20:15:35

解決方案1
11 已采納 2019-09-16 20:15:35