Delegiertes Klickereignis auf Anker

Question

Ich versuche, Anker-Tags zu targetieren und eine Ajax-Anfrage auszulösen. Mit jQuery ist dies sehr einfach:

$(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 + '/'); 
    } 
}); 

jedoch nativer JavaScript verwenden, könnte ich mir vorstellen event.target mit würde den Trick.

Aber dies nicht funktioniert, weil das Ereignis immer Ziele, was Element innerhalb des Anker-Tag ist:

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

ich nativen Javascript verwenden möchte zu tun, was jquery hat im ersten Codeausschnitt ist es möglich, ?

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 hier

event.target.closest("a") 

Vergessen Sie nicht, über polifill für die meisten Browser.

---

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