Событие триггера триггера для родителя с пузырьками

Я хочу вручную запустить событие click в родительском контейнере с помощью dispatchEvent. Вспышка события, похоже, не работает.Событие триггера триггера для родителя с пузырьками

// trigger click event on parent container 
parent.dispatchEvent(new MouseEvent("click", { 
    bubbles: true, 
    cancelable: true, 
    view: window, 
    clientX: 4, 
    clientY: 4 
}));

...

child.addEventListener('click', function(e) { 
    alert('click') 
}, false);

Смотрите эту скрипку:

https://jsfiddle.net/o4j0cjyp/2/

источник

2016-02-05 Christoph Bühler

Вы означая, чтобы попытаться вызвать событие на дочерний элемент? События пузырятся не вниз. –

@PatrickEvans О, я думал, что пузырь идет вниз. –

@PatrickEvans Есть ли способ сделать пузыри идти наоборот? –

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

Лучшим способом достижения вашей цели является использование делегирования делегирования, в котором вы используете общий родительский элемент как элемент прослушивания событий. Затем, когда событие происходит, проверьте цель события, если она нужна вам, чем любая работа.

Так что для вашего HTML

<div id="parent-container"> 
    <div id="child-container"> 
    this area has a click listener 
    </div> 
</div> 
<div id="click-info">No 'click' event yet.</div> 
<div class="btn" id="trigger-parent-btn"> 
    trigger 'click' event on parent container<br> 
    [ does not work ] 
</div> 
<div class="btn" id="trigger-child-btn"> 
    trigger 'click' event directly on child container 
</div>

Вместо создания обработчиков событий на каждом из них, и пытается вызвать ребенка или родителя событие, мы можем настроить нажмите слушателем на общего родителя (в данном случае <body>). Там мы можем проверить, является ли целевой элемент одним из трех, которые мы хотим вызвать, показывая информацию о клике, если это так показать информацию.

var info = document.querySelector("#click-info"); 
 
document.body.addEventListener("click",function(event){ 
 
    var target = event.target; 
 
    if(target.classList.contains("btn") || target.id=="child-container"){ 
 
    info.innerHTML = 'Clicked at ' + event.clientX + ':' + event.clientY; 
 
    } 
 
})

<div id="parent-container"> 
 
    <div id="child-container"> 
 
    this area has a click listener 
 
    </div> 
 
</div> 
 
<div id="click-info">No 'click' event yet.</div> 
 
<div class="btn" id="trigger-parent-btn"> 
 
    trigger 'click' event on parent container<br> 
 
    [ does not work ] 
 
</div> 
 
<div class="btn" id="trigger-child-btn"> 
 
    trigger 'click' event directly on child container 
 
</div>

источник

2016-02-05 15:53:43

Событие триггера триггера для родителя с пузырьками

ответ

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