J'ai créé le prochain jsfiddle:

http://jsfiddle.net/AHyN5/6/

Voici mon code:

var mainDiv = document.getElementsByClassName('mainDiv');
var div = mainDiv[0].getElementsByClassName('data');

mainDiv[0].addEventListener("click", function(e) {
     alert('1');
});

$(mainDiv[0]).children('img').click(function (e) {
    e.stopImmediatePropagation()
     return false;    
})

Je veux qu'un clic sur le fond rose fera apparaître un message avec une valeur de 1 (un message d'alerte).

En cliquant sur le jaune, je veux que rien ne se passe.

J'ai lu ce blog mais sans succès ..

Toute aide appréciée!

0
Alon Shmiel 14 juil. 2015 à 23:18

3 réponses

Meilleure réponse

Je suis d'accord avec les autres déclarant utiliser jQuery ou des appels DOM directs.

Voici une autre photo de la solution jQuery - très similaire à celle ci-dessus. Je suis allé de l'avant et je l'ai présenté parce qu'il cible directement les images - au cas où c'est ce que vous essayez vraiment d'accomplir.

$(function()
{   var mainDiv = $('div.pink:first'),
        imgs = $('img');

    mainDiv.click(function()
    {   alert('1');
    });

    imgs.click(function(e)
    {   e.stopImmediatePropagation();
    });
});
1
murmeister 14 juil. 2015 à 20:46

Vous disposez d'un mélange d'appels de méthodes jQuery et DOM. Notez également que pour attacher des écouteurs d'événements, vous devez attendre que tous les documents HTML soient prêts.

Je recommanderais d'utiliser les méthodes DOM ou les méthodes jquery. Voici un exemple de jquery:

$(function(){
    $('.pink:first').on("click", function(e) {
         alert('1');
    });

    $('.yellow').on('click', function (e) {
        e.stopPropagation();
    });
})

Voir également ce JSfiddle

0
leo.fcx 14 juil. 2015 à 20:36

Vous pouvez ajouter pointer-events: none; à la classe jaune. Cela empêchera ces éléments de déclencher des événements de clic.

Voir ici pour plus d'informations https://developer.mozilla.org/ en-US / docs / Web / CSS / pointer-events

0
Ed Ballot 14 juil. 2015 à 20:23