时间戳

首页 > 解决方案 > Firefox 中的奇怪属性行为

javascript - Firefox 中的奇怪属性行为

问题描述

我正在使用 JavaScript 并使用一些 DOM 元素构建我的页面。使用此代码，我在 Firefox 中遇到了一些奇怪的问题：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script type="text/javascript">

            function Button()
            {
                var that = document.createElement("div");
                return that;
            }

            function ContextMenu()
            {
                return new Button();
            }

            function onLoadPage()
            {
                var a = new Button();
                var b = new ContextMenu();
                a.contextMenu = b;
                console.log(" ->", b);
                console.log(" -->>", a.contextMenu);
            }
        </script>
    </head>

    <body onload="onLoadPage()"></body>
</html>

谷歌浏览器中的控制台日志：

 -> <div></div>
 -->> <div></div>

Firefox 中的控制台日志：

 -> <div></div>
 -->> null

如果我将“a.contextMenu”更改为“a.contextMenuu”，它会在 FF 中正常工作并按预期工作。我分配什么并不重要。似乎属性名称是保留的还是什么？那么为什么会这样呢？我可以做些什么来允许我在我的对象中使用任何属性名称吗？

标签： javascriptfirefoxdom

解决方案

contextMenu是 Firefox 和 Edge 目前支持的一项实验性技术。因此，尝试将该属性用于其他用途是行不通的，就像尝试将其parentNode用于其他用途一样行不通。

我可以做些什么来允许我在我的对象中使用任何属性名称吗？

不要在 DOM 元素上使用您自己的自定义属性（“expando”属性），或者使用不太可能与当前或未来 Web 标准（例如myAppContextMenu或类似）冲突的前缀。

根据您需要支持的浏览器，您可以使用WeakMap（甚至 IE11 支持...大部分）来避免在元素上存储属性。相反，您可以将它们用作 a 中的键WeakMap，并使用对象作为值，并在其中包含您想要的属性。如果WeakMap将元素从 DOM 中删除，则不会将其保留在内存中。

推荐阅读