gpt4 book ai didi

javascript - jQuery 文档的 Vanilla JS 版本点击链接?

转载 作者:行者123 更新时间:2023-12-01 06:21:46 25 4
gpt4 key购买 nike

有没有纯JS版本的?

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

我正在寻找的具体功能是为稍后通过 JS(例如 AJAX)创建的任何链接添加事件监听器。

最佳答案

现代浏览器支持匹配,这使得这变得更加容易

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上有一个polyfill

这更多地复制了 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>';

关于javascript - jQuery 文档的 Vanilla JS 版本点击链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45291962/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com