Question

你以前见过'紧急情况下，打破玻璃'的迹象。在玻璃后面有一个按钮可以发出警报声。在我的场景中，我正在尝试构建类似的东西，用户可以打破玻璃，然后按下按钮一个 mousedown事件。让我解释一下......

我有一个有两个孩子的父元素[A]。第一个孩子[B]落后并被第二个孩子[C]遮挡。

第二个元素[C]用作保护屏幕，防止鼠标移动事件进入第二个元素。这是通过在这些事件上调用stopPropagation来完成的。

当用户在[C]上进行mousedown时，该元素应该消失，鼠标事件应该是它的兄弟。我通过将其显示设置为无来使元素消失。

然而，mousedown事件不会转到兄弟[B]，它会向父母[A]起泡。随后的mousedown事件做转到兄弟[B]。

如何将[A]上的初始mousedown事件转到[B]？也就是说，一旦玻璃破碎[A]，如何按下按钮[B]？

这是一个例子： https://codepen.io/jedierikb/pen/JLPJrm

Answer 1

它是因为事件会冒泡到DOM树中的最高元素。我看到你已经阻止了鼠标移动时的事件冒泡，所以你只需要添加

     e.stopPropagation();

到按下事件处理程序

$c.addEventListener( 'mousedown', function(e) {
 console.log( 'the red button has been pressed' );
 e.stopPropagation();
 $c.style.display = 'none';
 ff = false;
});

不要忘记将相同的防泡方法添加到按钮＆＃34; b＆＃34;

如何将mousedown事件传播给兄弟姐妹？

1 个答案: