Как сравнить e.currentTarget и e.Target?
Я получаю события при нажатии кнопки и фоновом нажатии. В фоновом режиме я получаю currentTarget и Target одинаково, но в случае кнопки я становлюсь другим. Как я могу сравнить, равны они или нет, чтобы на равных я мог выполнить какую-то операцию?
@Phil «фон», кажется, относится к нажатию элемента, но не кнопки внутри него.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
event.currentTarget относится к element, к которому был привязан слушатель.
Здесь, в демоверсии, мы можем видеть, действительно ли мы нажимаем div (возможно, из-за огромного отступа), оценщик совпадения e.target === e.currentTarget действительно верен.
document.querySelector('#test').addEventListener('click', (e) => {
if (e.target === e.currentTarget) console.info('yes');
});div#test {
padding: 20px;
background-color: red;
}
div#test p {
background-color: blue;
}<div id = "test">
Try clicking here and then the P
<p id = "test2">Test</p>
</div>Объект события имеет некоторые свойства, 3 из которых являются наиболее важными:
Событие.цель — ссылка на "происхождение события". Проще говоря: нажата кнопка, текстовое поле, в которое пользователь ввел текст, пользователь радиокнопки выбрал и т. д.
Событие.currentTarget — ссылка на зарегистрированный прослушиватель/обработчик событий. Если currentTarget является предком других тегов, то этот currentTarget также может прослушивать события для всех них. Это возможно из-за распространения/пузырьков событий, см. Делегация мероприятия для получения более подробной информации.
Тип события — в основном щелчок, ввод, изменение, отправка, сброс, DOMContentLoaded и т. д.
The key to Event Delegation is to find out if
Event.target(which changes) is notEvent.currentTarget(which doesn't change unless it's unregistered to event(s).).
Подробности прокомментированы в демо
// Reference <form>
var current = document.forms[0];
// Register <form> to click, input, and change events
current.onclick = current.oninput = current.onchange = manageEvt;
// Callback function passes Event Object (e)
function manageEvt(e) {
// This is <form> - tag registered to event(s)
var cur = e.currentTarget;
// This is the tag that is event origin (clicked, changed, etc.)
var tgt = e.target;
// This is the event type (click, input, and change)
var evt = e.type;
/*
"this" is currentTarget (<form>)
.elements is all form controls of "this"
.out is the <output> id
*/
var out = this.elements.out;
// Clear <output>
out.value = '';
/*
if clicked, inputted, or changed tag is NOT <form>...
...display message...
Otherwise if only the <form> is clicked display another message.
*/
if (tgt !== cur) {
out.value = '#' + tgt.id + ' is Event.target for ' + evt.toUpperCase() + ' EVENT ------------------value: ' + tgt.value;
} else if (tgt === cur) {
out.value = '#' + tgt.id + ' is Event.target and Event.currentTarget for ' + evt.toUpperCase() + ' EVENT';
} else return false;
}form {
border: 3px dashed red;
padding: 30px;
}<form id='CURRENT'>
<button id='BUTTON' name='tgt' type='button' value = "button">CLICK EVENT</button><br>
<input id='TEXT' name='tgt' type='text' placeholder='INPUT EVENT'><br>
<input id='RADIOA' name='tgt' type='radio' value = "A"> A
<input id='RADIOB' name='tgt' type='radio' value = "B"> B<br>
<output id='out'></output>
</form>
Что такое "фоновый щелчок"? Кроме того, вы имеете в виду
if (e.target === e.currentTarget)?