如何修复 SCRIPT5007：无法在 Internet Explorer 11 中获取未定义或空引用的属性“parentNode”？

Question

我的代码在其他浏览器上运行良好，但在 Internet Explorer 11 上我得到 SCRIPT5007: Unable to get property 'parentNode' of undefined or null reference。有谁知道如何修复该错误？这是我的代码：

var selected

function dragOver(e) {
  if (isBefore(selected, e.target)) e.target.parentNode.insertBefore(selected, e.target)
  else e.target.parentNode.insertBefore(selected, e.target.nextSibling)
}

function dragEnd() {
  selected = null
}

function dragStart(e) {
  e.dataTransfer.effectAllowed = "move"
  e.dataTransfer.setData("text/plain", null)
  selected = e.target
}

function isBefore(el1, el2) {
  var cur;
  if (el2.parentNode === el1.parentNode) {
    for (cur = el1.previousSibling; cur; cur = cur.previousSibling) {
      if (cur === el2) return true
    }
  } else return false;
}

<div class="sequence">
  <div draggable="true" ondragend="dragEnd()" ondragover="dragOver(event)" ondragstart="dragStart(event)" class="choice 2" id="3">Yellow</div>
  <div draggable="true" ondragend="dragEnd()" ondragover="dragOver(event)" ondragstart="dragStart(event)" class="choice 2" id="5">Red</div>
  <div draggable="true" ondragend="dragEnd()" ondragover="dragOver(event)" ondragstart="dragStart(event)" class="choice 2" id="2">Green</div>
  <div draggable="true" ondragend="dragEnd()" ondragover="dragOver(event)" ondragstart="dragStart(event)" class="choice 2" id="1">Blue</div>
  <div draggable="true" ondragend="dragEnd()" ondragover="dragOver(event)" ondragstart="dragStart(event)" class="choice 2" id="4">Orange</div>
</div>

Answer 1

我测试了你的代码，错误首先发生在e.dataTransfer.setData("text/plain", null)，参数无效。这一行有两个错误：

1. IE 仅接受 text 和 URL 作为有效数据类型。解释可以参考this article：

   尽管 Internet Explorer 一开始只引入“文本”和“URL”作为有效数据类型，但 HTML5 对此进行了扩展以允许指定任何 MIME 类型。 HTML5 将支持值“text”和“URL”以实现向后兼容性，但它们被映射到“text/plain”和“text/uri-list”。

2. 我们应该使用具体的值作为数据，而不是 IE 中的null。我们可以使用事件目标的 id 作为数据。

所以这行应该改成：e.dataTransfer.setData("text", e.target.id)。

在此之后，我们需要将ondragover 事件更改为ondragenter，因为我发现ondragover 不会在IE 中被触发。所以最终的代码应该像下面这样在 IE 11 中运行良好：

var selected

function dragOver(e) {
  if (isBefore(selected, e.target)) e.target.parentNode.insertBefore(selected, e.target)
  else e.target.parentNode.insertBefore(selected, e.target.nextSibling)
}

function dragEnd() {
  selected = null
}

function dragStart(e) {
  e.dataTransfer.effectAllowed = "move"
  e.dataTransfer.setData("text", e.target.id)
  selected = e.target
}

function isBefore(el1, el2) {
  var cur;
  if (el2.parentNode === el1.parentNode) {
    for (cur = el1.previousSibling; cur; cur = cur.previousSibling) {
      if (cur === el2) return true
    }
  } else return false;
}

<div class="sequence">
  <div draggable="true" ondragend="dragEnd()" ondragenter="dragOver(event)" ondragstart="dragStart(event)" class="choice 2" id="3">Yellow</div>
  <div draggable="true" ondragend="dragEnd()" ondragenter="dragOver(event)" ondragstart="dragStart(event)" class="choice 2" id="5">Red</div>
  <div draggable="true" ondragend="dragEnd()" ondragenter="dragOver(event)" ondragstart="dragStart(event)" class="choice 2" id="2">Green</div>
  <div draggable="true" ondragend="dragEnd()" ondragenter="dragOver(event)" ondragstart="dragStart(event)" class="choice 2" id="1">Blue</div>
  <div draggable="true" ondragend="dragEnd()" ondragenter="dragOver(event)" ondragstart="dragStart(event)" class="choice 2" id="4">Orange</div>
</div>

Online demo

Answer 2

在您的事件处理程序中尝试这样的事情：

function dragOver( e ) {
  if (!e) e = window.event;
  if ( isBefore( selected, e.target ) ) e.target.parentNode.insertBefore( selected, e.target )
  else e.target.parentNode.insertBefore( selected, e.target.nextSibling )
}

参考： https://docstore.mik.ua/orelly/webprog/jscript/ch19_03.htm (19.3.2. IE 事件对象作为全局变量)