将点击事件注册到给定div / a的子级与类

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>

我试图做的是检测用户何时使用给定类sidenav-contact__type在div或a内单击，单击时我需要检索data-contact-type值。

现在我当然可以针对这个类，但是当我单击h5、p、figure或svg时，脚本不会运行，因为这些元素都没有类sidenav-contact__type

我目前拥有的JavaScript是：

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

javascript大师能否告诉我如何在具有类sidenav-contact__types的父元素的子元素上注册单击事件

注意：必须javascript

Answer 1

这样您就可以检索contact-type属性的数据。请注意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);
});
}

在这里查看您的工作示例：https://jsfiddle.net/skmqya0u/

Answer 2

试试这个应该可以工作

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