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

【问题标题】：Setting pointer-events on an SVG-path using Javascript使用 Javascript 在 SVG 路径上设置指针事件
【发布时间】：2020-10-31 03:56:44
【问题描述】：

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

我的第一次尝试是：

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

这应该可以工作，因为pointer-events 属性是继承的。它确实如此。除了我的svg 中的path 之外，所有元素都禁用了指针事件。然后google了一会儿，发现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-events。

现在我被卡住了，因为我不明白这一点。

【问题讨论】：

解释反对票可能会有所帮助。
您的问题应该包含足够的代码来重现问题。请创建一个minimal reproducible example

标签： javascript jquery css svg pointer-events

【解决方案1】：

这是一个非常愚蠢的问题。由于代码中其他地方的错误，它不起作用。

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

@Turnip 在他的评论中非常正确。如果您确实需要帮助，请发布所有相关代码。

我希望这对将来的人有所帮助。

【讨论】：