Как слушать детские события, когда дети прекращают распространение

Мне нужно посмотреть детские события в Document, но если дети перестают распространяться с помощью метода stopPropagation(), я не могу слушать эти события у детей.Как слушать детские события, когда дети прекращают распространение

Может ли кто-нибудь знать лучший способ сделать это?

EDIT: Теперь я хочу, чтобы создать расширение хрома для мониторинга события узла DOM, но это событие можно остановить распространение, и это не очень хорошая практика, чтобы добавить дополнительный приемник ко всем узлам. Следующий пример покажет мой вопрос.

клиент HTML фрагмент

<body> 
    <input type="button" value="Click Me" id="b"> 
</body>

клиента JavaScript

var button = document.querySelector('#b'); 
button.addEventListener('click', function(e) { 
    console.log('Button has been clicked'); 
    e.stopPropagation(); 
});

расширение хром сценарии содержание

document.addEventListener('click', function(e) { 
    console.log('Node(' + e.target.nodeName + ') has been clicked'); 
    // this listener will not be invoked because event has been stopped 
    // propagation. 
});

источник

2015-12-22 nailiebreak

Задавая вопросы здесь всегда лучше, чтобы описать вашу реальную проблему, а не только проблемы с вашей попыткой решения. Это позволяет людям, читающим ваш вопрос, предлагать вам решения, о которых вы даже не подозреваете. Когда вы только описываете проблемы с решением, которое вы пробовали и не имеете описания реальной проблемы, мы мало что можем сделать за рамками решения, которое вы в настоящее время пытаетесь создать. Это называется проблемой [XY] (http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) и строго ограничивает, насколько хорошо люди могут вам помочь ». – jfriend00

Вы можете использовать «захват» для отслеживания события до пузырения. Существует очень хорошее описание того, как захватывающие работы (в отличие от барботажа) в этой статье: Bubbling and capturing.

Таким образом, все браузеры, кроме IE до IE9, отправляют события по цепочке на лист, где произошло событие, а затем они пузыряют события. Слушание обычного события прослушивает только событие на самом объекте или для распространенных событий, но если вы установите третий аргумент .addEventListener() на true, он также будет прослушивать события, идущие вниз по цепочке, где объект document будет видеть событие ПЕРВЫЙ перед пузырение даже началось или было отменено.

Вот работающий фрагмент демо:

// show output 
 
function log(x) { 
 
    var div = document.createElement("div"); 
 
    div.innerHTML = x; 
 
    document.body.appendChild(div); 
 
} 
 

 
// stop propagation on leaf click 
 
var leaf = document.getElementById("leaf"); 
 

 
leaf.addEventListener("click", function(e) { 
 
    log("leaf message - click in leaf, propagation stopped") 
 
    e.stopPropagation(); 
 
}, false); 
 

 
// capture listen 
 
document.addEventListener("click", function(e) { 
 
    if (e.target === leaf) { 
 
    \t log("document message - click in leaf"); 
 
    } 
 
}, true);

<div id="topParent"> 
 
    <div id="midParent"> 
 
    <div id="leaf"> 
 
    Click Here 
 
    </div> 
 
    </div> 
 
</div>

источник

2015-12-23 00:44:44 jfriend00

На самом деле, теперь я работаю над расширением chrome для наблюдения за событием DOM. Это не хороший способ добавить прослушиватель событий ко всем узлам DOM, поэтому мне нужно добавить слушателя на высокий уровень, например 'document'. Однако событие может быть прекращено в собственных слушателях. – nailiebreak

@nailiebreak - Какое событие вы отслеживаете и почему? – jfriend00

Я обновил свой вопрос. Почему мне нужно следить за событием в «документе», потому что я не знаю, какой фактический клиент узла DOM щелкнет или изменит. – nailiebreak

Как слушать детские события, когда дети прекращают распространение

ответ

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