我正在做事件定位实验并比较它在 vanilla JS 和 jQuery 中的执行情况。我很惊讶结果不同；它在 vanilla JS 中取得了成功，但在 jQuery 中却不然。如果我没记错的话，jQuery 中事件定位的代码是 $(event.target)在普通 JS 中是 event.target 。在我的实验中，我只有 <body> 内有一个按钮标签，每当它成为事件的目标时，浏览器都应该警告“按钮元素是目标”，否则它将是“窗口本身是目标”。但即使目标元素是按钮，警报通知也只是“窗口本身被定位”。这是我的代码:
普通 JS
let $ = document.querySelector.bind(document);
window.onclick = function(event) {
if(event.target != $('button')) {
alert('window itself is targeted');
} else {
alert('button element is targeted');
}
}
jQuery
$(window).on('click', function(event) {
var $eventTarget = $(event.target);
if($eventTarget != $('button')) {
alert('window itself is targeted');
} else {
alert('button element is targeted');
}
});
在 jQuery 代码中，我尝试替换 $(event.target)与 event.target看看它的执行是否与普通 JS 类似，但没有任何改变。是我的代码的语法导致它失败还是有其他我没有注意到的错误。希望有人能指点一下。
最佳答案
您的测试存在缺陷，因为当您比较 DOMElement 和 jQuery 对象时， event.target != $('button') 始终为 true，并且 $eventTarget != $('button') 也将始终为 true，因为您无法直接比较对象。
要修复此比较对象的属性:
// Native:
let $ = document.querySelector.bind(document);
window.addEventListener('click', function(e) {
if (e.target.id != $('button').id) {
alert('window itself is targeted');
} else {
alert('button element is targeted');
}
});
请注意此处首选使用 addEventListener()，而不是 onclick()。
// jQuery
$(window).on('click', function(e) {
if (e.target.id != $('button').prop('id')) {
alert('window itself is targeted');
} else {
alert('button element is targeted');
}
});
关于javascript - Vanilla JS 中的事件定位与 jQuery 中的事件定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41160593/