Как правильно обработать событие нажатия кнопки мыши?

Question

[Кирилл]

Есть некий контейнер вида:

<div class="wrapper">
    <div class="box"></div>
</div>

с такими стилями:

.wrapper {
    position: absolute;
    left: 20px;
    top: 20px;
}
.box {
    position: relative;
    width: 100px;
    height: 100px;
    background: red;
}

и с таким небольшим кодом:

window.addEventListener('mousedown', function(e) {
    console.log(e.target.className)
});

Проблема в том, что когда я нажимаю кнопкой мыши на красный квадрат, в консоли я получаю блок .box. А нужно, чтобы выводился .wrapper. Как сделать, чтобы событие нажатия кнопки мыши срабатывало только для родителя (.wrapper) ?

P.S.: Обработчик mousedown должен быть привязан только к window (!).

Готовый пример тут.

*UPDATE:
Вложенность может быть любая. Например, такая:

<div class="wrapper">
    <div class="wrapper-2">
        <div class="box"></div>
    </div>
</div>

Это тоже нужно учесть. При такой вложенности при нажатии на красный квадрат нужно получить .wrapper.

**UPDATE:
Рекурсивно пробежался наружу до нужного родителя:

document.addEventListener('mousedown', function(e) {
    let el = e.target;
    
    while(el.className !== 'wrapper') {
    	el = el.parentNode;
        console.log(el)
    }
    
    console.log(el.className)
}, false);

Answer 1

[Stalker_RED]

В обработчике события:
evt.currentTarget и this - это объект, на котором висит listener
evt.target - куда на самом деле кликнули

Демка: https://jsfiddle.net/cvqxk44t/

Рекурсивно пробежался

Зачем рекурсивно, есть же .closest('.wrapper')

Comments

[Кирилл]

Можно и closest(). Но не везде она поддерживается.

[Stalker_RED]

Кирилл, для древних браузеров, типа ie, модно использовать полифиллы.

[Павел Корнилов]

(function(ELEMENT) {
    ELEMENT.matches = ELEMENT.matches || ELEMENT.mozMatchesSelector || ELEMENT.msMatchesSelector || ELEMENT.oMatchesSelector || ELEMENT.webkitMatchesSelector;
    ELEMENT.closest = ELEMENT.closest || function closest(selector) {
        if (!this) return null;
        if (this.matches(selector)) return this;
        if (!this.parentElement) {return null}
        else return this.parentElement.closest(selector)
      };
}(Element.prototype));

https://developer.mozilla.org/ru/docs/Web/API/Element/closest

Answer 2

[Vitaliy]

e.target.parentNode

Comments

[Кирилл]

Не вариант.. А если будет так:

<div class="wrapper">
    <div class="wrapper-2">
        <div class="box"></div>
    </div>
</div>

?

parentNode выведет wrapper-2, а нужно .wrapper

[Vitaliy]

Кирилл, рекурсивно тогда нужно искать родителя с нужным классом, или проще использовать какую-то легковесную библиотеку с методом closest как в jQuery