没有拖动时，鼠标注册事件不会触发

Question

我在this fiddle有一个程序，有时mouseup事件不会触发。通过在我的mousedown函数中调用draggable="false"并添加e.preventDefault()事件侦听器，我尝试了所有可以阻止拖动的操作，方法是将dragend放在每个元素上。但是，dragend事件不会触发，鼠标仍然无法触发。任何帮助将不胜感激。

Answer 1

不确定为什么在tile之间点击会导致mouseup不会触发，但你可以通过将mouseup funcion移动到它自己的函数并添加到窗口并将其设置为事件监听器来解决这个问题：

function mouseUp() {
   console.log('mouse up');
   mouseDown = false;
   mode = "add";
}
document.body.addEventListener("mouseup", mouseUp);
window.mouseUp = mouseUp;

然后将其添加到磁贴的onmouseup事件中：

onmouseup: 'mouseUp()',

Answer 2

问题在于附加到innerHTML，mysvg.innerHTML +=将（如讨论here）删除文档中的事件侦听器，停止鼠标事件触发。

通过在setMoveOnBoard函数中用mysvg.innerHTML +=替换mysvg.insertAdjacentHTML('beforeend',，您可以保留鼠标向上事件侦听器，因为insertAdjacentHTML()不会破坏DOM树。

示例：

function makeSVGTag(tagName, properties) {
  var keys = Object.keys(properties);
  var ret = "<" + tagName;
  for (var i = 0; i < keys.length; i++) {
    ret += " " + keys[i] + '="' + properties[keys[i]] + '"';
  }
  ret += "/>";
  return ret;
}

function makeSVGTagContent(tagName, properties, content) {
  var keys = Object.keys(properties);
  var ret = "<" + tagName;
  for (var i = 0; i < keys.length; i++) {
    ret += " " + keys[i] + '="' + properties[keys[i]] + '"';
  }
  ret += ">" + content.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;") + "</" + tagName + ">";
  return ret;
}

function setMoveOnBoard(color1, color2, color3, color4, symbol1, symbol2, x, y) {
  mysvg.insertAdjacentHTML('beforeend', makeSVGTag("rect", {
    height: 10,
    width: 10,
    stroke: color2,
    "stroke-width": 2,
    x: Number(x) + 3,
    y: Number(y) + 3,
    fill: color1,
    class: "move move-display",
    "data-index": (Number(y) / 16) * 15 + Number(x) / 16,
    draggable: false
  }));
  mysvg.insertAdjacentHTML('beforeend', makeSVGTagContent("text", {
    x: Number(x) + 4,
    y: Number(y) + 10,
    "font-family": "Verdana",
    "font-size": 10,
    stroke: "none",
    fill: color3,
    class: "move-symbol move-symbol1 move-display",
    "data-index": (Number(y) / 16) * 15 + Number(x) / 16,
    draggable: false
  }, symbol1));
  mysvg.insertAdjacentHTML('beforeend', makeSVGTagContent("text", {
    x: Number(x) + 4,
    y: Number(y) + 10,
    "font-family": "Verdana",
    "font-size": 10,
    stroke: "none",
    fill: color4,
    class: "move-symbol move-symbol2 move-display",
    "data-index": (Number(y) / 16) * 15 + Number(x) / 16,
    draggable: false
  }, symbol2));
}
var config = {
  color1: "#f00",
  color2: "#000",
  color3: "#0f0",
  color4: "#00f",
  symbol1: ">",
  symbol2: "<"
};
var mode = "add";

function toggleMove(i) {
  if (getMove(i)[0]) {
    mode = "remove";
    getMove(i)[0].remove();
    getMove(i)[1].remove();
    getMove(i)[2].remove();
  } else {
    mode = "add";
    setMoveOnBoard(config.color1, config.color2, config.color3, config.color4, config.symbol1, config.symbol2, mysvg.children[i].getAttribute("x"), mysvg.children[i].getAttribute("y"));
  }
}

function changeMove(i) {
  if (mode == "add") {
    setMoveOnBoard(config.color1, config.color2, config.color3, config.color4, config.symbol1, config.symbol2, mysvg.children[i].getAttribute("x"), mysvg.children[i].getAttribute("y"));
  } else {
    if (typeof getMove(i)[0].remove == "function") {
      getMove(i)[0].remove();
    }
    if (typeof getMove(i)[1].remove == "function") {
      getMove(i)[1].remove();
    }
    if (typeof getMove(i)[2].remove == "function") {
      getMove(i)[2].remove();
    }
  }
}
var mouseDown = false;
document.body.addEventListener("mouseup", function() {
  mouseDown = false;
  mode = "add";
});
document.body.addEventListener("dragend", function() {
  mouseDown = false;
  mode = "add";
});

function getMove(index) {
  var ret = [, , ];
  var moveList = mysvg.getElementsByClassName("move");
  for (var i = 0; i < moveList.length; i++) {
    if (moveList[i].getAttribute("data-index") == index) {
      ret[0] = moveList[i];
    }
  }
  moveList = mysvg.getElementsByClassName("move-symbol1");
  for (var i = 0; i < moveList.length; i++) {
    if (moveList[i].getAttribute("data-index") == index) {
      ret[1] = moveList[i];
    }
  }
  moveList = mysvg.getElementsByClassName("move-symbol2");
  for (var i = 0; i < moveList.length; i++) {
    if (moveList[i].getAttribute("data-index") == index) {
      ret[2] = moveList[i];
    }
  }
  return ret;
}

function tileClick(i, e) {
  e.preventDefault();
  mouseDown = true;
  if (i != 112) {
    toggleMove(i);
  }
}

function tileDrag(i, e) {
  if (mouseDown && i != 112) {
    changeMove(i);
  }
}
window.tileClick = tileClick;
window.tileDrag = tileDrag;
for (var i = 0; i < 225; i++) {
  mysvg.innerHTML += makeSVGTag("rect", {
    height: 16,
    width: 16,
    stroke: "#888",
    "stroke-width": 1,
    x: (i % 15) * 16,
    y: Math.floor(i / 15) * 16,
    fill: i % 2 ? "#eee" : "#fff",
    onmousedown: 'tileClick(' + i + ', event)',
    onmouseover: 'tileDrag(' + i + ', event)',
    class: "tile",
    "data-index": i,
    draggable: false
  });
}
mysvg.innerHTML += makeSVGTag("circle", {
  cx: 120,
  cy: 120,
  r: 5,
  class: "piece",
  "data-index": 112,
  draggable: false
});

text {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<svg width="251" height="251" id="mysvg" style="padding-left:2px;padding-top:2px;" class="board" draggable="false">
</svg>
<p>
  Console:
</p>
<textarea id="evalconsole"></textarea>
<button onclick="returnstatement.innerText=eval(evalconsole.value)">
  Eval!
</button>
<p id="returnstatement"></p>

希望这有帮助！