📌  相关文章
📜  SVG Event.composed 属性(1)

📅  最后修改于: 2023-12-03 15:35:11.585000             🧑  作者: Mango

SVG Event.composed 属性

在 SVG 中，事件传播需要通过该元素的包含树进行。由于 SVG 可以嵌套，所以 SVG 中的事件传播不同于 HTML。为了解决 SVG 中的事件传播，开发者引入了 Event.composed 属性。

定义

composed 属性是一个只读属性，指示事件是否会穿过阴影DOM树的 ShadowRoot 端口，传到上层节点。这个属性默认为 false，意味着事件不会到达阴影DOM树中的子节点。

使用

例如，在下面的代码块中，当用户点击 SVG 路径时，事件被传递给父元素，元素标记为 shadow-root 的子元素被忽略：

<body>
  <x-foo>
    #shadow-root
      <svg>
        <path fill="#ff0000" d="M25.086 97.01a8.1 8.1 0 1 1 8.1-8.1 8.1 8.1 0 0 1-8.1 8.1z"></path>
      </svg>
  </x-foo>

  <script>
    class XFoo extends HTMLElement {
        constructor() {
            super();
            this.attachShadow({ mode: 'open' });
            this.shadowRoot.innerHTML = `<slot></slot>`;
            this.shadowRoot.querySelector('slot').addEventListener('click', (ev) => {
                console.log(ev.composed);
            });
        }
    }

    customElements.define('x-foo', XFoo);
  </script>
</body>

在上面的代码块中，如果将 composed 属性设置为 true，那么 console.log 就会触发，因为 click 事件已经到达了 path 元素。

总结

在 SVG 中，事件传播不同于 HTML。通过使用 Event.composed 属性，可以提高事件传播的灵活性和可控性，特别是在嵌套的 SVG 中。