如何使 onClick 事件仅在故意单击元素时触发，而不是在从另一个元素“开始”单击时触发

问题描述 投票：0回答：1

在下面的代码片段中，如果您：

  • 向下单击红色
    <div>
    并按住单击
  • 然后将光标移动到蓝色
    <body>
    （尚未释放）
  • 然后在蓝色时松开点击
    <body>

然后 

e.target
会将点击算作对 
<body>
的点击，即使点击实际上发生在 
<div>
元素

我的场景是一个侧面菜单，当单击正文时应该关闭该菜单，但是，如果单击源自菜单但在正文上释放（就像我的代码片段中发生的情况一样），我不希望菜单关闭。这可以做到吗？

PS：为了澄清，我只是想了解这种行为以及如何获取点击的开始元素而不是现在正在发生的任何内容。我不是问如何构建菜单或任何东西。

我还注意到，如果您在 

<body>
中开始单击，然后在 
<div>
上释放它，它仍然算作对 
<body>
的单击。这与我上面演示的效果相反，这让我更加困惑。这是因为它总是选择开始和释放元素的更大祖先吗？当我用谷歌搜索时，我似乎无法得到任何结果。

PS：我正在使用谷歌浏览器，以防这种行为是特定于浏览器的。

document.body.addEventListener("click", (e) => {
  console.log(e.target);
});
body {
  height: 10rem;
  background: turquoise;
}
.div {
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: salmon;
}
<div class="div">Click Down Here</div>
Release Here

javascript event-listener
1个回答
0
投票

我认为您正在寻找 

mouseup
事件，而不是 o 
click
，当指针位于其中时释放指针设备（例如鼠标或触控板）上的按钮时，该事件会在元素上触发。

document.body.addEventListener("mouseup", (e) => {
  console.log(e.target);
});
body {
  height: 10rem;
  background: turquoise;
}
.div {
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: salmon;
}
<div class="div">Click Down Here</div>
Release Here

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.