父元素设置mousedown之后子元素的dragstart事件就不触发了？

Question

父元素设置mousedown之后子元素的dragstart事件就不触发了？

发布于
2023-09-25 陕西

<div
  ref="wrap"
  class="table-main"
  @dragenter="handlePrevent($event)"
  @dragover="handlePrevent($event)"
  @drop.capture="handleDrop($event)"
  @mousedown="down($event)"
  @mouseup="up($event)"
  @mousemove="move($event)"

>
  <div
    v-for="(item, index) in tables"
    :key="index"
    class="table-item"
    :style="{
      left: item.x + 'px',
      top: item.y + 'px',
      transform: `rotate(${item.angle}deg)`
    }"
    @dragstart.stop="curDragstart($event, index)"
    draggable="true"
    @click.stop="handleTable(index)"
  >
    <span>{{ item.name }}</span>
  </div>
</div>

给table-main添加mousedown这些鼠标事件之后，拖拽子元素table-item,他的dragstart就不触发了，直接触发父元素的mousedown事件，但是我明明给子元素添加了.stop阻止向上冒泡，问什么还是会直接触发table-main的mousedown呢？

前端 vue.js javascript

阅读 1.4k

AI BotBETA

这个问题出现的原因是事件冒泡（event bubbling）和事件捕获（event capturing）。

当你使用 .capture 修饰符为子元素添加事件监听器时，事件处理函数将在捕获阶段被调用，即在事件冒泡之前。这就意味着，如果在父元素上阻止了事件的冒泡阶段，那么子元素上使用捕获阶段添加的事件监听器将无法被触发。

在你的代码中，你为 table-main 元素添加了 mousedown 事件监听器，这可能会阻止子元素 table-item 的 dragstart 事件冒泡。由于你使用 .capture 修饰符为 table-item 添加了 dragstart 事件监听器，所以在 mousedown 事件触发时，它不会等到事件冒泡到 table-item，而是在捕获阶段就被阻止了。

为了解决这个问题，你可以尝试以下两种方法：

移除 mousedown 事件监听器，或者在事件处理函数中添加 event.stopPropagation() 来阻止事件向上冒泡。

methods: {
  down(event) {
    event.stopPropagation();
    // 其他处理代码
  }
}

将 dragstart 事件的监听器从 table-item 移到 table-main，并使用 .capture 修饰符。

<div
  ref="wrap"
  class="table-main"
  @dragenter="handlePrevent($event)"
  @dragover="handlePrevent($event)"
  @drop.capture="handleDrop($event)"
  @mousedown="down($event)"
  @mouseup="up($event)"
  @mousemove="move($event)"
  @dragstart.capture="curDragstart($event, index)"
>
  <div
    v-for="(item, index) in tables"
    :key="index"
    class="table-item"
    :style="{
      left: item.x + 'px',
      top: item.y + 'px',
      transform: `rotate(${item.angle}deg)`
    }"
    draggable="true"
    @click.stop="handleTable(index)"
  >
    <span>{{ item.name }}</span>
  </div>
</div>

这两种方法可以保证在 mousedown 事件触发时，不会阻止 dragstart 事件的触发。

1 个回答

得票最新

MrBigShot

4.8k1688119

发布于
2023-09-26 浙江

✓ 已被采纳

给子元素加一个 @mousedown.stop="" 试试
因为你子元素的 mousedown 冒泡出去了触发了父元素的 mousedown

撰写回答