javascript - 带有鼠标事件的 Div，带有带有鼠标事件的子 div - 单击外部 div，同时触发两个事件

Question

假设我有 Div A，还有一个子 Div B。两者都分配有鼠标单击。我如何才能点击 Div A，并同时触发 Div A 和 Div B 的事件？我研究过事件冒泡，但到目前为止，我所有实现此目的的尝试都失败了。

我正在这样分配鼠标事件:

elem.addEventListener( 'click', myResponseFunction, true );

我尝试将两者或其中之一的冒泡设置为 true 和 false，但没有成功。这可能吗？请不要使用 jQuery 解决方案。

进一步说明:

考虑一个可展开的广告，其折叠部分中的图 block 可以是视频或概要，由数据提供商在运行时确定。我希望广告在点击折叠部分中的任意位置时展开，但如果“查看视频”按钮或“查看概要”按钮位于点击展开按钮下方，我希望广告前进到适当的 View 扩大后。如果可能的话，我希望有一种更简洁的方法，而不是将展开操作放在每个图 block 的号召性用语按钮上。每个图 block 都是一个带有背景图像和号召性用语按钮的 div，所有这些都被点击展开按钮覆盖。

Answer 1

点击事件仅在鼠标/触摸指针下方的元素上触发。

冒泡(向上)意味着一旦子元素处理了单击事件，它就会在其父元素上触发相同类型的另一个事件。此过程一直重复到 document 元素。你想要的东西正在冒泡。不幸的是，JavaScript 中不存在这个概念。

一个务实的解决方案是迭代所有子节点，并在单击父节点时手动触发单击事件。会有一个副作用:默认情况下，鼠标事件会冒泡，因此当单击子节点时，其父节点也会收到单击事件。通过在子单击事件处理程序内部进一步停止事件传播，可以轻松解决此问题。

这是一个完整的示例:

document.querySelector('.parent').addEventListener('click', function(e) {
    console.log('hello from parent');

    var children = this.children;
    [].forEach.call(children, function(elem) {
        elem.click();
    });
});

document.querySelector('.child').addEventListener('click', function(e) {
    e.stopPropagation();
    console.log('hello from child');
});

.parent {
    height: 300px;
    width: 400px;
    background-color: lightblue;
}

.child {
    position: relative;
    top: 100px;
    left: 100px;
    height: 100px;
    width: 200px;
    background-color: lightyellow;
}

<div class='parent'>
    <div class='child'></div>
</div>