Question

我有以下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>

我尝试做的是检测用户在给定类div的{{1}}或a内部点击时，点击时我需要检索{ {1}}值。

现在我当然可以定位此课程，但是当我点击sidenav-contact__type，data-contact-type，h5或p时，脚本不会由于没有具有类figure

的元素而运行

我目前的javascript是：

svg

sidenav-contact__type大师可以告诉我如何在具有类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 }); }的父元素的子元素上注册click事件

注意：必须在javascript

Answer 1

试试这个应该有效

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

这样您就可以检索数据contact-type属性。请注意contactType的camelcase表示法。

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);

    });
}

请在此处查看您的工作示例：https://jsfiddle.net/skmqya0u/

将click事件注册到给定div / a的子级和class

2 个答案: