锚上的委派点击事件

Delegated click event on anchors

本文关键字：事件 委派      更新时间：2024-04-17

我正在尝试以锚标记为目标并触发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在第一个代码片段中所做的事情，这可能吗？

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);
相关文章：