錨上的委托點擊事件

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

但是，使用本地javascript，我可以想象使用event.target可以達到目的。

但這是行不通的，因為事件始終以錨標記內的任何元素為目標：

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

我想使用本機javascript來執行第一個代碼段中的jQuery，這可能嗎？

Answer 1

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/closest
https://developer.mozilla.org/ru/docs/Web/API/Element/closest-2個策略填充

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