Question

我正在使用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>

Google Chrome浏览器中的控制台日志：

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

控制台登录Firefox：

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

如果我将“ a.contextMenu”更改为“ a.contextMenuu”，则它可以在FF中正常运行，并且符合预期。我分配什么都没关系。似乎属性名称是保留名称或其他内容？那么为什么会这样呢？我可以做任何事情来允许我在对象中使用任何属性名称吗？

Answer 1

contextMenu是Firefox和Edge当前支持的一项实验技术。因此，尝试将该属性用于否则无效，就像试图将parentNode用于其他无效。

我可以做任何事情来允许我在对象中使用任何属性名称吗？

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

根据需要支持的浏览器，您可以使用WeakMap（甚至IE11也支持...大多数）来避免在元素上存储属性。相反，您可以将它们用作WeakMap中的键，并使用一个对象作为具有所需属性的值。如果WeakMap元素已从DOM中删除，则不会保留在内存中。

Firefox中的奇怪属性行为

1 个答案: