Vanilla JS与jQuery中的事件定位

Question

我正在进行事件定位实验，并比较其在香草JS和jQuery中的执行情况。 我惊讶于结果不同。 在香草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，但什么都没有改变。 是我的代码语法使其失败，还是我没有注意到其他错误。 我希望有人可以向我指出。

Answer 1

因为$('button')和$(event.target) ，即使它们引用相同的Button，它们也不是相同的Object。

使用jQuery比较两个dom元素的正确方法是比较它们的tag / class / id或任何其他属性

alert($(event.target) == $(event.target)); // false (same target, different jQuery objects)

alert($('button') == $('button')); // false (same button, different jQuery objects)

alert($(event.target).is('button')); // true (comparing element tags)

alert($(event.target).attr('id') == 'buttonId'); // true (comparing element ids)

alert($(event.target).hasClass('buttonClass')); // true (comparing element classes)

DEMO

Answer 2

您的测试存在缺陷，因为event.target != $('button')在比较DOMElement和jQuery对象时将始终为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()首选使用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');
    }
});

工作jQuery示例

Vanilla JS与jQuery中的事件定位

问题描述

2 个解决方案

解决方案1
2 2016-12-15 09:32:24

解决方案2
2 2016-12-15 09:33:49

Vanilla JS与jQuery中的事件定位

问题描述

2 个解决方案

解决方案1 2 2016-12-15 09:32:24

解决方案2 2 2016-12-15 09:33:49

解决方案1
2 2016-12-15 09:32:24

解决方案2
2 2016-12-15 09:33:49