clic - uniquement sur les clics "directs".

Question

Si vous mettez un .click() sur un élément div et que vous avez un élément d'entrée dans le div comment pouvez-vous ensuite omettre le .click() si l'utilisateur clique sur l'entrée ?

Le div.click() ne doit se déclencher que lorsque l'utilisateur clique à l'intérieur du div, mais à l'extérieur de l'élément de saisie.

<div style="width:400px; height:200px">
<input type="text" style="width:50px" />
</div>

Answer 1

Vous avez deux choix :

Attachez un click à l'élément de saisie et empêchez l'événement de remonter en appelant event.stopPropagation() [docs] :

$('input').click(function(event) {
    event.stopPropagation();
});

OU

Inspecter le event.target [docs] dans le click attaché à l'événement div si la cible est le input ou non. Quelque chose comme :

if(event.target.nodeName !== 'INPUT') {
    // do something
}

Answer 2

Vous pouvez utiliser ceci :

if(event.toElement != this)
    return;

Answer 3

Pour que cela ne fonctionne que sur les clics directs, faites ceci :

pour jquery :

$(".background").click(() => {
    console.log("background got clicked");
});

$(".background > *").click((event) => {
    event.stopPropagation();
});

pour la vanille js :

document.querySelector(".background").addEventListener("click", (event) => {
    console.log("background got clicked");
});

let backgroundChildren = document.querySelectorAll(".background > *");

backgroundChildren.forEach(element => {
    element.addEventListener("click", (event) => {
        event.stopPropagation();
    });
});