How is click.self supposed to work?

Question

Vue.js

https://codesandbox.io/s/self-problem-m8feh

It seems that a .self modifier is hung on a click on a red square, but when we mousedown on blue, and mouseup is already on red, suddenly the click event on red fires. What is it then click? In this regard, the question is:

1) Why is .self needed then
2) How to fix the problem that has arisen. You need the event to occur only when you fully click on the red square.

Answer 1

The jamb is not in vue, but in js, which sends an event to where there was a press and where there was a release. You can get around something like this: https://codesandbox.io/s/self-problem-6iemw