Как словить нажатие на любой элемент на странице?

Рейтинг: 1Ответов: 1Опубликовано: 30.12.2014

Здравствуйте.

Есть страница, в данном случае на ней кнопки:

<!DOCTYPE html>
<html>
        <head>
            <title>Button</title>
        </head>
        <body>
           <button></button>
           <button></button>
           <button></button>
        </body>
</html>

Нужно на javascript словить onClick по любой из этих кнопок.

<button></button>
Это не вариант

При этом элементы на странице динамически добавляются и удаляются.

На данный момент я придумал вот что:

document.onclick = function(e){
    if(e.target.tagName == "BUTTON"){
        console.log(e.target);
    }
};

Но здесь проблема такова: если внутри <button> есть ещё один тэг, то мы попадаем на него.

javascript html
Источник: Stack Overflow на русском

Ответы

▲ 4Принят

Смотрим пример

[].forEach.call(document.querySelectorAll('button'), function(but){
    but.addEventListener('click', function(){
        // действия по клику
    }, false);
});

UPD Забыл про динамические элементы. Пример с динамикой

document.body.addEventListener('click', function(e){
    if(e.target.tagName == 'BUTTON'){
        // чего-то творим
    }
}, false);

UPD 2 Проверяем работу без учета дочерних элементов

document.body.addEventListener('click', function(e){
    var target = e.target;
    while (target && target.tagName !== 'BUTTON') {
        target = target.parentNode;
        if(!target) return false;
    }
    // тут что-то делаем по клику на кнопку или его дочерним элементам
}, false);