javascript - 当实际的鼠标单击未在目标元素上开始时，如何防止触发单击事件？

Question

我需要捕获 parent 元素上的 onclick 事件，但如果点击是在 child 元素内完成的，我也会忽略它。因此，如果您直接在子元素内部单击，则不会发生任何事情。我设法在下面的代码中做到了这一点。但是，如果我开始单击(按下鼠标按钮)在子元素内，然后完成 子元素外部(以及父元素内部)的点击(释放鼠标按钮)会被视为完全在父元素上完成的点击。因此，即使它是一个 onclick 事件，它的行为也类似于 mouseup 事件(恕我直言)。问题在于，当用户与子元素交互时(例如，选择子元素内的文本)，可能会意外触发该事件。我需要的是检测此点击事件仅当它开始并在父元素内部和子元素外部完成时。

document.querySelector('.parent').addEventListener('click', my_function);

function my_function()
{
  if(event.target.classList.contains('parent'))
  {
	document.querySelector('.child').innerHTML = 'Click event detected.';
  }
}

.parent
{
  color: #fff;
  padding: 100px;
  background-color: red;
}

.child
{
  color: #fff;
  height: 200px;
  padding: 10px;
  background-color: black;
}

<div class="parent">
  This is the parent element where the click event should be detected.
  <div class="child">
    This is the child element where the click event should NOT be detected. 
    However, if you start your click here (mouse button down) and then finish
    it (mouse button up) outside this element (and inside the parent element) 
    then the click is still detected. How can I solve this?
  </div>
</div>

Answer 1

您可以尝试使用 mousedown event而不是 click ，它的工作原理几乎完全相同，但没有您提到的问题

document.querySelector('.parent').addEventListener('mousedown', my_function);

function my_function()
{
  if(event.target.classList.contains('parent'))
  {
	document.querySelector('.child').innerHTML = 'Click event detected.';
  }
}

.parent
{
  color: #fff;
  padding: 100px;
  background-color: red;
}

.child
{
  color: #fff;
  height: 200px;
  padding: 10px;
  background-color: black;
}

<div class="parent">
  This is the parent element where the click event should be detected.
  <div class="child">
    This is the child element where the click event should NOT be detected. 
    However, if you start your click here (mouse button down) and then finish
    it (mouse button up) outside this element (and inside the parent element) 
    then the click is still detected. How can I solve this?
  </div>
</div>

我在这里所做的只是将事件从click更改为mousedown，问题似乎完全消失了。