Question

我试图在click事件上使用appendchild更改其z-pos的元素上捕获mousedown事件。问题是当你点击一个元素而不是前面的元素时，click事件就不会被触发。我知道这是因为它已从DOM中删除然后重新添加，但我不确定如何修复它，以便在元素移动到前面时点击也会触发。

＆＃13;

MyObject = {
  init(parent, text) {
    this.parent = parent;
    this.text= text;
    this.visual = document.createElement("div");
    this.visual.setAttribute("class", "object");
    this.visual.appendChild(document.createTextNode(text))
    parent.appendChild(this.visual);;
    
    this.visual.addEventListener("click", (e) => { this.onClicked(e); });
    this.visual.addEventListener("mousedown", (e) => { this.onMouseDown (e); });
  },
  
  toTop() {
    this.parent.appendChild(this.visual);
  },
  onClicked(e) {
    alert(this.text + " was clicked");
	e.stopPropagation();
  },
  onMouseDown(e) {
    this.toTop();
    // I'm also doing other things here
  }
};

var parent = document.querySelector(".parent");
parent.addEventListener("click", (e) => { alert("parent clicked"); });

var createObj = function(text) {
  var obj = Object.create(MyObject);
  obj.init (parent, text);
};

createObj ("object 1");
createObj ("object 2");
createObj ("object 3");
createObj ("object 4");

＆＃13;

.parent {
  border: 1px solid red;
}
.object {
  background: #0F0;
  border: 1px solid black;
  margin: 8px;
}

＆＃13;

<div class="parent">
  
</div>

＆＃13;

因此，在此示例中，您始终必须单击底部元素才能获取警报，而我还希望在按下其他项目时收到警报。

编辑：我在chrome（55.0.2883.87）中进行测试，但代码可能无法在其他浏览器中使用。

在dom中重新附加子项时单击事件

0 个答案: