Détecter un clic à l'intérieur ou à l'extérieur d'un élément avec un seul gestionnaire d'événements

Question

Supposons que j'ai une div sur ma page. comment détecter le clic de l'utilisateur sur le contenu de la div ou à l'extérieur du contenu de la div via JavaScript ou jQuery. s'il vous plaît aider avec un petit extrait de code. merci.

Modifier : Comme indiqué dans l'une des réponses ci-dessous, je veux seulement attacher un gestionnaire d'événements à mon body, et aussi savoir quel élément a été cliqué.

Answer 1

Cette question peut être répondue avec des coordonnées X et Y et sans JQuery:

       var isPointerEventInsideElement = function (event, element) {
            var pos = {
                x: event.targetTouches ? event.targetTouches[0].clientX : event.clientX,
                y: event.targetTouches ? event.targetTouches[0].clientY : event.clientY
            };
            var rect = element.getBoundingClientRect();
            return  pos.x < rect.right && pos.x > rect.left && pos.y < rect.bottom && pos.y > rect.top;
        };

        document.querySelector('#my-element').addEventListener('click', function (event) {
           console.log(isPointerEventInsideElement(event, document.querySelector('#my-any-child-element')))
        });

Answer 2

Pour bootstrap 4, cela fonctionne pour moi.

$(document).on('click', function(e) {
    $('[data-toggle="popover"],[data-original-title]').each(function() {
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide')
        }
    });
});

Démonstration fonctionnelle sur le lien jsfiddle: https://jsfiddle.net/LabibMuhammadJamal/jys10nez/9/

Answer 3

En vanilla javaScript - en ES6

(() => {
    document.querySelector('.parent').addEventListener('click', event => {
        alert(event.target.classList.contains('child') ? 'Élément enfant.' : 'Élément parent.');
    });
})();

.parent {
    display: inline-block;
    padding: 45px;
    background: lightgreen;
}
.child {
    width: 120px;
    height:60px;
    background: teal;
}

Answer 4

Si vous voulez ajouter un écouteur de clic dans la console Chrome, utilisez ceci

document.querySelectorAll("label")[6].parentElement.onclick = () => {console.log('label cliqué');}

Answer 5

fonction closePopover(sel) {
    $('body').on('click', function(e) {
        if (!$(event.target).closest(sel+', .popover-body').length) {
            $(sel).popover('hide');
        }
    });
}

closePopover('#elem1'); closePopover('#elem2');