拖拽元素时避免触发blur与mouseleave事件的解决方案

问题描述：在监听blur或mouseleave事件执行操作时，拖拽页面内的可拖动元素会误触发这些事件，希望仅在正常光标移出窗口（或blur对应的外部点击场景）时才触发事件，且尽量避免使用状态变量。

解决方案：利用:drag伪类判断拖拽状态 #

无需维护额外状态变量，直接在事件回调中通过CSS伪类:drag检测当前是否有元素正在被拖拽，以此决定是否执行事件逻辑：

window.addEventListener('blur', () => {
  // 不存在正在拖拽的元素时才执行操作
  if (!document.querySelector(':drag')) {
    console.log('blur triggered')
  }
})

document.documentElement.addEventListener('mouseleave', () => {
  // 不存在正在拖拽的元素时才执行操作
  if (!document.querySelector(':drag')) {
    console.log('mouseleave triggered')
  }
})

document.documentElement.addEventListener('mouseenter', () => {
  console.log('mouseenter triggered')
})

对应的CSS和HTML代码保持不变：

.item {
  background-color: blue;
  border: 1px solid black;
  color: white;
}

<div>
  <div draggable=true class='item'>Item 1</div>
  <div draggable=true class='item'>Item 2</div>
  <div draggable=true class='item'>Item 3</div>
</div>

原理说明 #

:drag是CSS原生伪类，用于匹配当前正在被拖拽的元素。在blur和mouseleave事件触发时，若检测到页面中存在这类元素，则说明事件是由拖拽操作导致的，直接跳过执行；反之则判定为正常场景，执行原有逻辑。

该方案无需额外维护状态变量，避免了状态管理带来的逻辑复杂度和潜在错误，且现代主流浏览器（Chrome、Firefox、Edge等）均支持:drag伪类。

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