使用 Javascript 在 SVG 路径上设置指针事件

Question

我正在使用 JavaScript 函数来启用和禁用 pointer-events 单击。 <svg> 是 <main> 元素的子元素的子元素。

我的第一次尝试是：

let el = jQuery( "main" );
el.css({ "pointer-events": "none" });

这应该有效，因为 pointer-events 属性是继承的。确实如此。除我的 svg 中的 path 外，所有元素都禁用指针事件。然后，在谷歌搜索了一段时间后，我发现 svg 中的 pointer-events 是一个元素的属性。

所以我尝试了：

let el = jQuery( "main" );
console.log( el.find( "path" ).attr( "pointer-events" ) ); // which returns: undefined

el.css({ "pointer-events": "none" });
el.find( "path" ).attr( "pointer-events", "none" );
console.log( el.find( "path" ).attr( "pointer-events" ) ); // which returns: none

属性已设置，但它不起作用。该路径仍然响应 hover- 和 click-事件。

现在我卡住了，因为我不明白这个。

Answer 1

这是个很愚蠢的问题。由于代码中其他地方的错误，它没有工作。

虽然显然 svg 没有继承 pointer-events-属性。但 el.find( "path" ).css( "pointer-events": "none" ); 完美运行。

@Turnip 的评论非常正确。如果您真的需要帮助，您想要 post 所有相关代码。

我希望这对以后的人有所帮助。

使用 Javascript 在 SVG 路径上设置指针事件

Setting pointer-events on an SVG-path using Javascript

javascript

jquery

css

svg

pointer-events