避けるには、以下のようにイベントリスナを作成し、私は<em>リンク</em>と<em>ボタン</em>のグループの<em><a href="http://www.w3schools.com/tags/att_global_data.asp" rel="nofollow">data attributes</a></em>を取得しようとしている代わりに、親

Question

の子を参照のevent.target イベントリスナー、次の機能を実行します：

function executeOnClick(e){ 
    //////////// Only elements which has "specialClass" 
    if (hasClass(e.target, 'specialClass')) { 
     if(e.target !== undefined){ 
      console.info(e.target.getAttribute('data-info')); 
      e.preventDefault(); 
     } 
    } 
} 

でも動作しない場合番目e リンクまたはボタンには、タグがあります。例：

<a data-info="Lorem ipsum 3!" href="#" class="specialClass"> 
    <div>Link with div inside: <br> "event.target" is "div", not "a"</div> 
</a> 

要素がある場合と子がない場合は、どのように動作させるのかわかりません。誰かが私を助けることができますか？

私の問題のCodepen：http://codepen.io/tomloprod/pen/gwaVXE

注：これは問題ではありませんので、私はhasClassメソッドの定義を省略しています。とにかく、あなたはcodepenでそれを見ることができます。

Answer 1

data-info属性の存在について、parentNodeを再帰的にチェックする関数を使用できます。

ここは例です。

//////////// This function works well. 
 

 
function findParentWithData(elem) { 
 
    try { 
 
    if(elem.getAttribute('data-info')) 
 
     return elem; 
 
    } catch(e) { 
 
    console.log('This was an anchor without data-info attribute.') 
 
    return e 
 
    } 
 
    while(!elem.getAttribute('data-info')) { 
 
    return findParentWithData(elem.parentNode); 
 
    } 
 
} 
 

 
function hasClass(event, className) { 
 
    if (event.classList) { 
 
    return event.classList.contains(className); 
 
    } 
 
    return new RegExp('(^|)' + className + '(|$)', 'gi').test(event.className); 
 
} 
 

 
function executeOnClick(e) { 
 

 
    // if click came from body don't do anything 
 
    if (e.target === document.body) return; 
 

 
    var result = document.getElementById("result"); 
 
    result.innerHTML = ""; 
 

 
    //////////// Only elements that has "specialClass" 
 

 
    // find parent with data-info 
 
    var elem = findParentWithData(e.target) 
 

 
    if (elem instanceof Element && hasClass(elem, 'specialClass')) { 
 
    if(elem !== undefined){ 
 
     result.innerHTML = "Information: " + elem.getAttribute('data-info'); 
 
     e.preventDefault(); 
 
    } 
 
    } 
 
} 
 

 
// For all major browsers, except IE 8 and earlier 
 
if (document.addEventListener) { 
 
    document.addEventListener("click", executeOnClick); 
 
} else if (document.attachEvent) { 
 
    // For IE 8 and earlier versions 
 
    document.attachEvent("onclick", executeOnClick); 
 
}

.btn { 
 
    opacity:0.8; 
 
    border:0; 
 
    -webkit-border-radius: 28; 
 
    -moz-border-radius: 28; 
 
    border-radius: 28px; 
 
    font-family: Arial; 
 
    color: #ffffff; 
 
    font-size: 37px; 
 
    padding: 10px 20px 10px 20px; 
 
    text-decoration: none; 
 
    outline:0; 
 
    margin: 0em 0 1em 0; 
 
    display: -webkit-inline-box; 
 

 
} 
 
.btn:hover { 
 
    cursor:pointer; 
 
    opacity:1; 
 

 
    text-decoration: none; 
 
} 
 

 
.btn.red{ 
 
    background:#e74c3c; 
 
} 
 
.btn.green{ 
 
    background:#2ecc71; 
 
}

<div id="result"></div> 
 

 
<a data-info="Lorem ipsum!" href="#" class="btn green specialClass">Link: Working well</a> \t 
 

 
<button data-info="Lorem ipsum 2!" class="btn green specialClass">Button: Working well too</button> 
 

 
<a data-info="Lorem ipsum 3!" href="#" class="btn red specialClass"> 
 
    <div>Link with div inside: <br> Doesn't work</div> 
 
</a> 
 

 
<a data-info="Lorem ipsum 4!" href="#" class="btn red specialClass"> 
 
    <ul> 
 
    <li> 
 
     Link with ul inside: 
 
    </li> 
 
    <li> 
 
     Doesn't work 
 
    </li> 
 
    </ul> 
 
</a> 
 

 
<a href="#" class="btn red">Foo</a>