Question

是否有纯粹的JS版本？

$(document).on('click', 'a[href]', function(event) {
  event.preventDefault();
  here.change(this);
});

我正在寻找的特定功能是为以后通过JS（例如AJAX）创建的任何链接添加事件侦听器。

Answer 1

现代浏览器支持matches，这使得这更容易

document.addEventListener('click', function(event) {
  if (event.target.matches('a[href], a[href] *')) {
    event.preventDefault();
    console.log('works fine')
  }
}, false);

document.body.innerHTML = '<a href="#"><span>Click Me!</span></a><br /><div>not me!</div>';

使用简单的功能

可以使这更方便

function addEvent(parent, evt, selector, handler) {
    parent.addEventListener(evt, function(event) {
    if (event.target.matches(selector + ', ' + selector + ' *')) {
        handler.apply(event.target.closest(selector), arguments);
    }
  }, false);    
}

请注意，closest()仅在最新浏览器中受支持，MDN上有填充

这复制了更多jQuery行为，并且更易于使用，它还正确设置了this的值

function addEvent(parent, evt, selector, handler) {
  parent.addEventListener(evt, function(event) {
    if (event.target.matches(selector + ', ' + selector + ' *')) {
      handler.apply(event.target.closest(selector), arguments);
    }
  }, false);
}

/* To be used as */

addEvent(document, 'click', 'a[href]', function(e) {
  console.log(this)
});

/* Add a dynamic element */

document.body.innerHTML = '<a href="#"><span>Click Me!</span></a><br /><div>not me!</div>';

Answer 2

您可以将click个事件附加到document。检查event.target .tagName是否为"A"，event.target是否具有财产.href。目前尚不清楚预期here.change(this)的预期结果将来自问题文本

＆＃13;

function dynamicA() {
  var a = document.createElement("a");
  a.href = "";
  a.textContent = "a";
  document.body.innerHTML += "<br>";
  document.body.appendChild(a);
}

document.addEventListener("click", function(event) {
  event.preventDefault();
  if (event.target.tagName === "A" && event.target.href) {
    // do stuff
    dynamicA();
  }
});

＆＃13;

<a href>a</a>

＆＃13;

Answer 3

我相信这可以实现你想要的：

// for all dom elements on click
document.onclick = function(event) {
    var el = event.target; // get what is being clicked on
    if(el.hasAttribute('href') && el.tagName == 'a') { // check if it's a link
        event.preventDefault();
        here.change(this); // what is this?
    }
}

点击链接的香草JS版jQuery文档？

3 个答案: