javascript - 如果单击从子 div 开始并在父 div 上结束，如何防止单击事件(Chrome 错误)

Question

我试图阻止 click父级触发事件 <div>如果用户启动 click关于 child <div> ，然后将鼠标移出子项 <div>但不离开 parent <div>仍然按住它，然后在父级上释放。

父级和子级都有 jQuery click分配有 event.stopPropagation() 的事件.

预计没有click如果我在 <div> 之外释放鼠标，则会触发事件我最初按下鼠标。

至少在 Firefox 和 Safari 上是这样工作的，但在 Chrome 上却不然。

按钮可以正常工作，而 div 则不能。也许我可以从按钮复制​​一些魔法并将其应用于 div？

http://jsfiddle.net/zd7L68b2

<div class="outer">
    <button class="inner">
    </button>
    <div class="inner">
    </div>
</div>

$('.outer').click(function(e){
    console.log('Clicked outer');
});

$('.outer').moused(function(e){
    console.log('Clicked outer');
});

$('.inner').click(function(e){
    e.stopPropagation();
    console.log('Clicked inner');
});

Answer 1

严格来说，无论我们是否选择访问它们，所有鼠标事件都会被浏览器检测到。

为了解决您的问题，我不会监视 click 事件，而是分别监视 mousedown 和 mouseup 事件。在我的简单代码片段中，如果 mousedown 事件发生在所需的内部，则名为 innerClick 的 boolean 变量将切换 true目标，但没有其他代码被触发。在单独的 mouseup 监听器中，条件检查鼠标是否在所需目标内释放以及 innerClick boolean 是否设置为 true (表明最后一次鼠标按下也是在那里进行的)。您需要执行的代码或对包含它的功能 block 的调用被放置在该条件中。在我的代码片段中，调用 console.log() 来演示特异性。

mouseup 监听器还必须将 innerClick 切换为 false；

let innerClick = false;

document.addEventListener('mousedown', event => {
  if (event.target.id == "red") {
    // mouse down on red box;
    innerClick = true;
  } // end if;
}); // end mousedown event

document.addEventListener('mouseup', event => {
 
   if (innerClick && event.target.id == "red") {
     //mouse up inside red;
     console.log("exclusively inside red");
     // call or place code for red click here;
   } else {
     console.log("nope!");
   } // end if-else;
   
  //reset innerClick boolean;
  innerClick = false;

}); // end mouseup event

.container {
  width: 300px;
  height: 100px;
  background: yellow;
  display: flex;
  align-items:center;
  justify-content: center;
}


.inner {
  width: 30%;
  height: 30%;
  background: red;
  border: 1px solid black;
}

<div id="yellow" class="container">
  <div id="red" class="inner"></div>
</div>

请注意，mousedown 和 mouseup 监听器是在 document 而不是元素上设置的。这没有计算开销，但允许在两个简单的代码块中监视元素的无限组合(每个代码块都有自己的条件 block ，可以在其中放置或调用相关代码)。

已在 Chrome 和 Firefox 中测试并运行。使用核心 JS 的另一个优点是更广泛、无错误的支持。