SVG Event.returnValue 属性

SVG Event.returnValue 属性是用于处理事件冒泡时的返回值的属性。当一个事件发生时，它会在被触发的元素和它的祖先元素之间进行冒泡。在冒泡过程中，如果某个元素处理了事件并设置了 Event.returnValue 属性为 false，那么该事件将停止冒泡并不再被后续元素处理。

语法

Event.returnValue 的值为布尔类型，true 表示事件可以继续冒泡，false 则表示事件停止冒泡。该属性可以通过事件对象来访问，如下：

function handleClick(event) {
  event.returnValue = false;
}

示例

以下示例展示了如何使用 SVG Event.returnValue 属性来判断事件是否继续冒泡。

<svg viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg"
     onclick="handleClick(event)">
  <rect x="10" y="10" width="80" height="80" fill="red"/>
</svg>

function handleClick(event) {
  console.log('click');
  event.returnValue = false; // 阻止冒泡
}

在上面的示例中，单击 SVG 元素时，事件将触发 handleClick 函数。在该函数中，我们将事件的 returnValue 属性设置为 false。这将停止事件的冒泡并将事件传递到它的父元素。

注意事项

• 当设置了 Event.returnValue 属性为 false 时，只会停止事件在当前元素的祖先元素中的冒泡，不会停止事件在当前元素内部的传播。
• 在 SVG 中，没有 touchend 事件。如果要在移动设备上处理点击事件，请使用 click 事件，并确保在事件处理函数中设置 Event.returnValue 属性。

参考资料

• SVG Event.returnValue Property
• SVG Event Handling