註冊click事件與課堂上給出DIV /一的孩子

我有以下HTML：註冊click事件與課堂上給出DIV /一的孩子

<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或a內用戶點擊與給定的類sidenav-contact__type，點擊時我需要檢索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

來源

2017-05-04 Code Ratchet

你使用的瀏覽器：

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

在這裏看到你的工作的例子嗎？我已經在Chrome和Firefox上試過了，當我點擊'div'或'a'的子元素時，每次在控制檯上看到'here'消息。（https://jsfiddle.net/myktnaj6/）它是否按預期工作？ – jaumemk

奇怪，現在工作也許它是一個緩存的事情。無論哪種方式，你會知道我如何檢索'數據聯繫人類型'？ –

在函數'this.dataset.contactType'中使用'this'。查看示例：https：//jsfiddle.net/skmqya0u/ – jaumemk

這樣你就可以檢索數據contact-type屬性。請注意0的camelcase符號。 https://jsfiddle.net/skmqya0u/

來源

2017-05-04 23:34:30 jaumemk

試試這個它應該工作

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 

    }); 
}

來源

2017-05-04 23:27:37

註冊click事件與課堂上給出DIV /一的孩子

回答

相關問題