javascript - 在屏幕的一部分上禁用鼠标单击

Question

<分区>

Answer 1

您需要使用 addEventHandler 将事件处理程序添加到 div .在处理程序中，您需要使用 event.preventDefault()对于要取消的事件的默认行为和 event.stopPropagation()阻止事件冒泡到父元素。在下面的示例中，如果您单击红色方 block 周围，它将打印“已单击”。如果您在正方形内部单击，则什么也不会发生:

document.addEventListener('click', function(e) {
  console.log("clicked");
});

document.getElementById('disabled-mouse').addEventListener('click', function(event) {
  event.preventDefault();
  event.stopPropagation();
});

#disabled-mouse {
  margin: 20px;
  width: 50px;
  height: 50px;
  background-color: red;
}

<div id="container">
  <div id="disabled-mouse">
  </div>
</div>

这只会取消鼠标左键的点击。如果您需要取消其他事件，您需要为它们做同样的事情。查看鼠标事件列表:Mouse Events