向班级中给定div / a的孩子注册点击事件

Question

I have the following HTML :

<div class="sidenav-contact__types">
    <div class="sidenav-contact__type js-sidenav-contact__type" data-contact-type="call-me-back">
        <figure>
            <svg class="sidenav-contact__icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/etc/designs/site/img/icons.svg#caller-inverse"></use></svg>
        </figure>
        <h5>Call me back</h5>
        <p>Talk to a Representative about our range.</p>
    </div>

    <div class="sidenav-contact__type js-sidenav-contact__type" data-contact-type="contact-us">
        <figure>
            <svg class="sidenav-contact__icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/etc/designs/site/img/icons.svg#info-inverse"></use></svg>
        </figure>
        <h5>Contact Us</h5>
        <p>For FAQs, feedback, suggestions or media.</p>
    </div>

    <a class="sidenav-contact__type" href="http://site" data-contact-type="new button">
        <figure>
            <svg class="sidenav-contact__icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/etc/designs/site/img/icons.svg#recall-inverse"></use></svg>
        </figure>
        <h5>Information</h5>
        <p>vehicle is affected.</p>
    </a>
</div>

What I'm trying to do is detect when a user clicks inside a div or a with the given class sidenav-contact__type , when clicked I then need to retrieve the data-contact-type value.

Now I could of course target this class in general, but when I click on the h5 , p , figure or svg the script doesn't run due to none of those elements having the class sidenav-contact__type

The javascript I currently have is:

var myElements = document.getElementsByClassName('sidenav-contact__type');

for(var i = 0; i < myElements.length; i++){

    myElements[i].addEventListener('click', function(){

        console.log('here');

        //get data-contact-type from div or a

    });

}

Can a javascript guru please show me how I can register a click event on the children elements of the parent element that has the class sidenav-contact__types

note: has to be in javascript

Answer 1

try this it should work

var myElements = document.querySelectorAll(".sidenav-contact__type, .sidenav-contact__type *"); //select every class element and it's childs
for(var i in myElements){
    myElements[i].addEventListener('click', function(){

        console.log('here');

        //get data-contact-type from div or a

    });
}

Answer 2

This way you can retrieve the data contact-type attribute. Note the camelcase notation of contactType .

var myElements = document.getElementsByClassName('sidenav-contact__type');
for(var i = 0; i < myElements.length; i++){
        myElements[i].addEventListener('click', function(){

        console.log(this.dataset.contactType);

    });
}

See here your working example: https://jsfiddle.net/skmqya0u/