JS技术问题：阻止父元素在跨元素鼠标操作时触发click事件

问题原因 #

当你在元素1上按下鼠标左键、在元素2上释放时，浏览器会把click事件派发给这两个元素的最近共同祖先（也就是你的wrapper）——这是浏览器的默认行为。preventDefault和stopPropagation在这里没用，因为它们只能控制当前事件的传播流程，没法阻止浏览器生成这个“跨元素”的click事件。

解决方案：追踪鼠标按下/释放的元素 #

核心思路是记录鼠标按下时的目标元素，释放时对比是否为同一个元素，标记“跨元素操作”状态，最后在wrapper的click事件里根据状态决定是否执行逻辑。

以下是修改后的完整代码：

HTML

Click and hold left mouse button on 1 and release it on 2. Now wrapper click won't trigger.
<div class="container" id="wrapper">
  wrapper
  <div class="container" id="one">1</div>
  <div class="container" id="two">2</div>
</div>

<div class="toolbar">
  <button id="clear">clear</button>
  <label>
    <input type="checkbox" id='preventDefault'>
    preventDefault
  </label>
  <label>
    <input type="checkbox" id='stopPropagation'>
    stopPropagation
  </label>
</div>

CSS（无需修改）

.container {
  border: 1px solid gray;
  background-color: lightgray;
}

.toolbar {
  position: absolute;
  right: 1rem;
  top: 2rem;
  display: flex;
  flex-direction: column;
}

#wrapper {
  position: relative;
  width: 250px;
  height: 150px;
}

#one,
#two {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: blue;
  color: white;
}

#one {
  left: 50px;
  top: 50px;
}

#two {
  left: 150px;
  top: 50px;
}

JavaScript（关键修改）

const wrapper = document.getElementById('wrapper');
const one = document.getElementById('one');
const two = document.getElementById('two');
const preventDefault = document.getElementById('preventDefault');
const stopPropagation = document.getElementById('stopPropagation');

const clear = document.getElementById('clear');
clear.addEventListener('click', () => console.clear());

// 新增：追踪鼠标按下的元素和是否为跨元素操作
let mouseDownElement = null;
let isCrossElementAction = false;

const subscribe = (element) => {
  const eventHandler = (event) => {
    console.log(event.defaultPrevented ? 'prevented' : '', event.type, 'on', element.id);
    
    // 记录鼠标按下的元素
    if (event.type === 'mousedown') {
      mouseDownElement = element;
      isCrossElementAction = false;
    }
    
    // 判断是否为跨元素释放
    if (event.type === 'mouseup') {
      if (mouseDownElement !== element) {
        isCrossElementAction = true;
      }
      // 鼠标离开页面时重置状态，避免残留
      document.addEventListener('mouseleave', resetMouseState);
    }
    
    // wrapper的click事件：跨元素操作则跳过逻辑
    if (event.type === 'click' && element.id === 'wrapper') {
      if (isCrossElementAction) {
        console.log('Skipping wrapper click due to cross-element action');
        return;
      }
    }
    
    if (preventDefault.checked) {
      event.preventDefault();
    }
    if (stopPropagation.checked) {
      event.stopPropagation();
    }
  };
  
  element.addEventListener('mousedown', eventHandler);
  element.addEventListener('mouseup', eventHandler);
  element.addEventListener('click', eventHandler);
};

// 重置鼠标状态的辅助函数
function resetMouseState() {
  mouseDownElement = null;
  isCrossElementAction = false;
  document.removeEventListener('mouseleave', resetMouseState);
}

subscribe(wrapper);
subscribe(one);
subscribe(two);

说明 #

1. 新增状态变量记录鼠标操作的起始元素和跨元素标记
2. 在mouseup事件中对比起始/释放元素，更新跨元素状态
3. wrapper的click事件根据状态决定是否执行原有逻辑
4. 增加mouseleave监听，防止鼠标离开页面后状态残留

这个方案不会影响wrapper的正常点击（比如直接点击wrapper空白处），只会拦截跨元素按下/释放导致的误触发。

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