How to cancel the click event on a child element while moving the mouse to the parent element?

Question

Vue.js

There are two elements:
parent-box and child-box
And you need to make sure that when you click on child-box, the event on parent-box does not work. And everything would be fine, you can hang on the click .self and everything will work, but it became necessary to take into account such a case, when we click on the child-box, move the mouse while holding it to the parent-box, release the mouse and the event fires. And it needs to not work. Is there an elegant way to do this by attaching the necessary modifiers to the events? So far, I have come up with such a way as to replace click in parent-box with mousedown, but somehow I still don’t really like the idea. Any other suggestions on how to fix the problem?

Code:
https://codesandbox.io/s/practical-sound-6o3s0?fil...

Answer 1

You can replace the click event with mouseDown

<div class="parent-box" @mousedown.self="action">
      <div class="child-box" />
    </div>