アンカーで委任されたクリックイベント

Question

アンカータグをターゲットにして、Ajaxリクエストをトリガーしようとしています。使用してjQueryのは、これは非常に簡単です：

$(document.body).on('click', "a", function (event) { 
    'use strict'; 
    if ($(this).is('.a-btn')) { 
     event.preventDefault(); 
    } else if ($(this).is('.no-sp')) { 
     // 
    } else { 
     address = $(this).attr("href") 
     event.preventDefault(); 
     App.Ajax.Page(address + '/'); 
    } 
}); 

は、しかし、私はトリックを行うだろうevent.targetを使用して想像ネイティブJavaScriptを使用して。

しかし、これは動作しません、アンカータグ内にあるものは何でも要素イベントは常にターゲットので：それは可能である

App.Ajax.Navigate = function() { 
    'use strict'; 
    document.body.addEventListener('click', function (e) { 
     e.preventDefault(); 
     console.log(e.currentTarget); 
     if (e.target.tagName === 'a') { 
      var element, link; 
      element = e.target; 
      link = element.href; 

      if (App.HTML.hasClass(element, 'a-btn')) { 
       e.preventDefault(); 
      } else if (App.HTML.hasClass(element, 'no-sp')) { 
       return; 
      } else { 
       e.preventDefault(); 
       App.Ajax.Page(link); 
      } 

     } 
    }, true); 

    window.onpopstate = function (event) { 
     App.Page.type = event.state.type; 
     App.Page.Replace(event.state.content, event.state.type, App.Empty, false); 
    }; 
}; 

私はjqueryのは、最初のコードスニペットでは何を行うにはネイティブJavaScriptを使用したいです、 ？

Answer 1

https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
https://developer.mozilla.org/ru/docs/Web/API/Element/closestから2 polifillsここ

event.target.closest("a") 

は、ほとんどのブラウザのためpolifill忘れてはいけません。

---

(function(e){ 
    if (!e.matches) { 
    e.matches = e.mozMatchesSelector || e.msMatchesSelector || e.oMatchesSelector || e.webkitMatchesSelector; 
    } 

    if (!e.closest) { 
    e.closest = function (css) { 
     for (var node = this; node; node = node.parentElement) { 
     if (node.matches(css)) { 
      return node; 
     } 
     } 

     return null; 
    } 
    } 
})(Element.prototype);