Таргетинг на события в Vanilla JS vs. in jQuery

Я выполняю эксперимент по таргетингу на события и сравниваю его выполнение с ванильными JS и jQuery. Я был удивлен, что результат был другим; он был успешным в vanilla JS, но не в jQuery. Если я не ошибаюсь, код для таргетинга на события в jQuery равен $(event.target), а в vanilla JS - event.target. В моем эксперименте у меня есть только кнопка внутри тега <body>, и всякий раз, когда она является объектом события, браузер должен предупредить, что «элемент кнопки является целевым», иначе это будет «само окно цели». Но оповещение было только «само окно», даже если целевой элемент является кнопкой. Вот мой код:Таргетинг на события в Vanilla JS vs. in jQuery

Vanilla 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, но ничего не изменилось. Является ли это грамматикой моего кода, что он терпит неудачу или что-то еще не так, что я просто не замечаю. Надеюсь, кто-то может указать мне на это.

источник

2016-12-15 jst16

Потому что $('button') и $(event.target), даже если они относятся к одной и той же Button, это не тот же объект.

Правильный способ сравнения двух DOM элементов с помощью JQuery, чтобы сравнить их тег/класс/идентификатор или любой другой атрибут

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

источник

2016-12-15 09:32:24

Большое спасибо :) – jst16

так 'является()' метод решения – jst16

@ jst16 Его одно решение (в котором вы сравните HTML тег элементов) , Вы также можете сравнить класс, идентификатор или любой другой атрибут –

Ваш тест несовершенна, как event.target != $('button') всегда будет верно, как вы сравниваете объект DOMElement и jQuery, и $eventTarget != $('button') также всегда будет правдой, поскольку вы не можете напрямую сравнивать объекты.

Чтобы исправить это сравнить свойства объектов:

// 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().

Working native example

// jQuery 
$(window).on('click', function(e) { 
    if (e.target.id != $('button').prop('id')) { 
     alert('window itself is targeted'); 
    } else { 
     alert('button element is targeted'); 
    } 
});

Working jQuery example

источник

2016-12-15 09:33:49

Таргетинг на события в Vanilla JS vs. in jQuery

ответ

Смежные вопросы