JavaScript 设置指针事件答案

【问题标题】：JavaScript setting pointer-eventsJavaScript 设置指针事件
【发布时间】：2020-11-28 20:27:45
【问题描述】：

我正在尝试通过 JavaScript 为 div 设置 pointer-events: none，但是该属性没有被应用。

我试过了：

document.getElementById("div").setAttribute("pointer-events", "none");

还有：

document.getElementById("div").style.pointer-events = "none";

但都没有成功，有什么想法吗？

【问题讨论】：

【解决方案1】：

您的第一次尝试失败了，因为它是一个 CSS 属性而不是一个属性（style 属性的一部分）。

您的第二次尝试失败了，因为某些原因，当将此 API casing-like-this 转换为 camelCasingLikeThis 时。这很可能因为构建 JavaScript 的人和构建 CSS 的人没有很好地协调。

以下应该有效：

document.getElementById("div").style.pointerEvents = "none";

【讨论】：

很高兴我能帮上忙，你可能会觉得这很有趣：youtube.com/watch?v=Y2Y0U-2qJMs
能否请您链接到列出这些 JavaScript 样式属性的文档？例如，我看不到任何关于pointerEvents 提到here 的信息。
@Mitch 当然，一般来说，MDN 不是规范参考（它是用户友好的手册）。它是 defined here 和最近的 in the new spec 映射到 the style attribute。指针事件are specced here 和属性本身pointer-events 源自svg。
@Mitch 它是隐含的，它不是 JavaScript 属性 - 正如我链接到的文档所说 - CSS 属性 go-like-this 和 JS 属性 goLikeThis，通过 style 属性您可以访问 any CSS 属性，但您需要应用转换 - 在指针事件的情况下，它是从 pointer-events 到 pointEvents，如在此处在 IDL（DOM 语言）和 CSS 之间转换的算法中指定的： drafts.csswg.org/cssom/#css-property-to-idl-attribute
@BenjaminGruenbaum 谢谢。 :) 我只需要知道有一个疯狂的方法，而不是只是随意选择没有文档的变量名。

【解决方案2】：

您可以像这样通过Bracket notation 访问样式属性：

document.getElementById("div").style['pointer-events'] = 'auto';

在这种情况下不需要进行驼峰式修改。

【讨论】：

【解决方案3】：

book 中有一个example，它使用element.setAttributeNS(null, "pointer-events", "none"); 而不是element.style.pointer-events = "none";。

【讨论】：