0

我正在使用 AOS 插件，它通过自定义事件传递一个对象。该对象如下所示：

[object Object]: {detail: Object}

detail: Object
accessKey: ""
align: ""

attributes: Object
baseURI: "http://localhost:3000/docs/countup.html"
childElementCount: 0

childNodes: Object

children: Object

classList: Object
className: "aos-init aos-animate"
clientHeight: 0
clientLeft: 0
clientTop: 0
clientWidth: 788
contentEditable: "inherit"

dataset: Object
dir: ""
draggable: false
firstChild: null
firstElementChild: null
hidden: false
hideFocus: false
id: ""
innerHTML: ""
innerText: ""
isContentEditable: false
lang: ""
lastChild: null
lastElementChild: null
localName: "h1"
msContentZoomFactor: 1
msRegionOverflow: "undefined"
namespaceURI: "http://www.w3.org/1999/xhtml"

nextElementSibling: Object

nextSibling: Object
nodeName: "H1"
nodeType: 1
nodeValue: null
offsetHeight: 0
offsetLeft: 32

offsetParent: Object
offsetTop: 48
offsetWidth: 788
onabort: null
onactivate: null
onbeforeactivate: null
onbeforecopy: null
onbeforecut: null
onbeforedeactivate: null
onbeforepaste: null
onblur: null
oncanplay: null
oncanplaythrough: null
onchange: null
onclick: null
oncontextmenu: null
oncopy: null
oncuechange: null
oncut: null
ondblclick: null
ondeactivate: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
ondurationchange: null
onemptied: null
onended: null
onerror: null
onfocus: null
ongotpointercapture: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onloadeddata: null
onloadedmetadata: null
onloadstart: null
onlostpointercapture: null
onmousedown: null
onmouseenter: null
onmouseleave: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmousewheel: null
onmscontentzoom: null
onmsgesturechange: null
onmsgesturedoubletap: null
onmsgestureend: null
onmsgesturehold: null
onmsgesturestart: null
onmsgesturetap: null
onmsinertiastart: null
onmsmanipulationstatechanged: null
onpaste: null
onpause: null
onplay: null
onplaying: null
onpointercancel: null
onpointerdown: null
onpointerenter: null
onpointerleave: null
onpointermove: null
onpointerout: null
onpointerover: null
onpointerup: null
onprogress: null
onratechange: null
onreset: null
onscroll: null
onseeked: null
onseeking: null
onselect: null
onselectstart: null
onstalled: null
onsubmit: null
onsuspend: null
ontimeupdate: null
onvolumechange: null
onwaiting: null
onwebkitfullscreenchange: null
onwebkitfullscreenerror: null
onwheel: null
outerHTML: "<h1 class="aos-init aos-animate" data-aos="" data-toggle="countup" data-to="256" data-from="0" data-aos-id="countup:in"></h1>"
outerText: ""

ownerDocument: Object

parentElement: Object

parentNode: Object
prefix: null

previousElementSibling: Object

previousSibling: Object
scrollHeight: 0
scrollLeft: 0
scrollTop: 0
scrollWidth: 788
spellcheck: true

style: Object
tabIndex: 0
tagName: "H1"
textContent: ""
title: ""

__proto__: Object

__proto__: Object

上面的对象作为e.detail. 问题是当我运行e.detail instanceof Element它时，它会true在除 IE 和 Edge 之外的所有浏览器中返回。在 IE 和 Edge 中它返回false，所以我不能将它作为一个普通的 DOM 元素使用。任何想法为什么？有没有办法解析它或什么？

4

1 回答 1

0

当涉及到主机提供的对象（如 DOM 元素）时，您不能依赖太多。正如您所发现的，不同的主机可以自由地以不同的方式实现事物。

分别：instanceof不可靠的跨领域。因此，如果您从另一个窗口（这是另一个领域）获取对象（任何类型，而不仅仅是主机提供的对象），instanceof则可能会失败。那是因为instanceof工作方式是检查所有对象的原型链，并查看它的任何原型是否是prototype您要与之比较的函数的属性上的对象（Element在您的示例中）。这就是我们拥有 的部分原因Array.isArray，因为a instanceof Array如果数组来自另一个窗口，则会失败。

没有理由instanceof在 DOM 元素上使用。只需使用元素。如果你想确保它是一个元素，一个相当可靠的检查是a.detail.nodeType === 1. （可靠如：它适用于任何 DOM 元素。自然，如果有人给你一个对象，其nodeType属性为 1 的属性不是 DOM 元素，它会通过检查，但是......）

于 2019-04-05T10:17:41.897 回答