嵌套可拖拽元素拖拽时ondragstart事件触发异常求助

嗨，这个问题我之前也碰到过！核心原因是拖拽事件会遵循DOM的事件冒泡机制——当你拖拽内部的#2 div时，dragstart事件会从目标元素开始，沿着DOM树向上传递，所以父级的#1 div的dragstart事件也会被触发。

要解决这个问题，只需要在内部元素的dragstart事件处理函数里，阻止事件继续向上冒泡就可以了。具体做法如下：

代码示例 #

HTML结构

<div id="1" draggable="true" ondragstart="onDragStart1(event)">
  <div id="2" draggable="true" ondragstart="onDragStart2(event)">内部可拖拽元素</div>
</div>

JavaScript处理逻辑

function onDragStart1(event) {
  console.log("触发外部#1 div的dragstart");
}

function onDragStart2(event) {
  // 关键：阻止事件冒泡，避免父元素的同类型事件被触发
  event.stopPropagation();
  console.log("触发内部#2 div的dragstart");
}

原理说明 #

event.stopPropagation()方法会阻止事件在DOM树中进一步向上传播，这样当你拖拽#2 div时，dragstart事件只会停留在#2元素本身，不会触发父级#1元素的事件处理函数。

如果你是用addEventListener来绑定事件，写法也是类似的：

document.getElementById('1').addEventListener('dragstart', function(event) {
  console.log("触发外部#1 div的dragstart");
});

document.getElementById('2').addEventListener('dragstart', function(event) {
  event.stopPropagation();
  console.log("触发内部#2 div的dragstart");
});

这样调整之后，拖拽内部的#2 div时就只会触发onDragStart2啦！

内容的提问来源于stack exchange，提问作者jaine