Как отменить событие по клику на дочерний элемент перемещая при этом мышь на родительский элемент?

Question

[Артем]

Есть два элемента:
parent-box и child-box
И нужно сделать чтобы по клику на child-box событие на parent-box не срабатывало. И все бы хорошо, можно навесить на клик .self и все будет работать, но возникла необходимость учитывать такой кейс, когда мы нажимаем по child-box перемещаем удерживая мышь на parent-box, отпускаем мышь и событие срабатывает. А нужно, чтобы не срабатывало. Есть элегантные способы это сделать, навесив необходимые модификаторы на события? Пока что нашел в голову пришел такой способ как заменить click в parent-box на mousedown, но как-то пока что не очень нравится идея. Есть еще предложения, как можно решить проблему?

Код:
https://codesandbox.io/s/practical-sound-6o3s0?fil...

Answer 1

[Иван]

Можно событие click заменить на mouseDown

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

Comments

[Артем]

А есть способы, чтобы именно оставить полный клик? Ну то есть чтобы action только после mouseup срабатывал