Comment empêcher événement click parent lors du déplacement de l'enfant au parent

Question

Si vous souhaitez un clic dans un élément enfant de ne pas bulle à son parent, vous pouvez arrêter le barbotage à l'aide stopPropagation

<div class="parent"> 
    <div class="child"></div> 
</div> 

document.querySelector('.parent').addEventListener('click',()=> { .. } 
document.querySelector('.child').addEventListener('click',()=> { .. } 

DEMO

Mais comment empêchez-vous le clic parent, lorsque le clic commence à l'intérieur de l'enfant et se termine à l'extérieur. En d'autres termes: mousedown l'intérieur de l'enfant, puis un mousemove, qui déplace le pointeur à l'extérieur de l'enfant (mais à l'intérieur du parent) puis mouseup

La chose la plus importante pour moi, est que, dans cette situation, je ne veux pas le clic parent, des suggestions? MISE À JOUR: Si vous vous souvenez de la cible de mousedown, vous pouvez l'utiliser dans le rappel du clic parent: DEMO. Mais j'espère qu'il y a une meilleure solution

Answer 1

J'espère que je comprends votre question assez claire. Vous recherchez un événement ou un type de méthode qui vous permettrait de toujours trouver la première valeur cliquée. e.stopPropagation() & la propriété de capture en tant que troisième paramètre pour un écouteur d'événements ne fonctionnera pas non plus.

Ce que je ferais dans le même temps serait d'ajouter une variable supplémentaire en dehors de la portée de votre auditeurs. OnClick vous permet d'assigner cette variable à un élément sur lequel vous cliquez.

ou vous pouvez modifier vos gestionnaires de clic pour qu'ils soient 'mousedown.' De cette façon, cela n'a pas d'importance si l'utilisateur s'éloigne de la pièce sur laquelle il a cliqué pour la première fois. La deuxième fois que l'utilisateur mousses, ils déclencheront l'événement.