如何实现拖动DIV时禁用.ignore类内部元素的拖动触发

实现思路 #

原有拖拽逻辑的触发入口是绑定在#draggable元素上的mousedown事件，由于事件冒泡机制，点击内部所有子元素都会触发这个监听函数。我们只需要在拖拽状态初始化的最开头，增加目标位置的校验：如果鼠标按下的位置处于.ignore类元素覆盖的范围内，就直接终止逻辑，不设置拖拽激活状态，自然不会触发后续的拖动行为。

关键修改点 #

• 不需要修改原有HTML结构，也不需要给.ignore元素额外绑定事件
• 校验逻辑使用原生closest()方法，可同时覆盖两种场景：直接点击.ignore元素本身、点击.ignore内部的任意子元素（比如案例中的<select>下拉框）
• 不拦截原生组件的默认交互，.ignore区域内的下拉选择、按钮点击等功能完全不受影响

修改后的完整代码 #

JavaScript 实现 #

// 确保DOM加载完成后获取目标元素
const draggable = document.getElementById('draggable');
let isMouseDown = false;
let initX = 0;
let initY = 0;
const height = draggable.offsetHeight;
const width = draggable.offsetWidth;

draggable.addEventListener('mousedown', function(e) {
  // 核心新增逻辑：校验是否在.ignore区域内点击，是则直接不触发拖拽
  if (e.target.closest('.ignore')) {
    return;
  }
  isMouseDown = true;
  document.body.classList.add('no-select');
  initX = e.offsetX;
  initY = e.offsetY;
})

document.addEventListener('mousemove', function(e) {
  if (isMouseDown) {
    let cx = e.clientX - initX;
    let cy = e.clientY - initY;
    // 原边界限制逻辑保持原有实现
    if (cx < 0) {
      cx = 0;
    }
    if (cy < 0) {
      cy = 0;
    }
    if (window.innerWidth - cx < width) {
      cx = window.innerWidth - width;
    }
    if (window.innerHeight - cy < height) {
      cy = window.innerHeight - height;
    }
    draggable.style.left = cx + 'px';
    draggable.style.top = cy + 'px';
  }
})

// 优化点：将mouseup监听绑定在document上，避免鼠标移出元素后松开无法重置拖拽状态的问题
document.addEventListener('mouseup', function() {
  isMouseDown = false;
  document.body.classList.remove('no-select');
})

HTML 结构（保持原有结构无需修改） #

<div id="draggable" class="no-select">
  <div class="ignore">
    <select></select>
  </div>
  <div>Other contents</div>
</div>

额外优化提示 #

• 原代码将mouseup事件绑定在draggable元素上的逻辑存在缺陷：如果用户按住鼠标拖动到元素范围外松开，isMouseDown状态无法重置，会出现后续移动鼠标自动跟随的问题，绑定到document上即可解决这个场景问题
• 原有边界判断的冗余计算可以简化，直接通过cx/cy的取值和可视区尺寸比对即可，无需重复结合e.clientX和initX计算，可读性更强

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