Question

我有一个有关如何停止事件传播的问题。

想象一下我有两个div，一个容器和一个竞争器。

当我在内容中进行完整的单击（鼠标和鼠标上移）时，可以使用preventDefault（）停止传播

但是，如果我将鼠标放在内容内部，将鼠标移到外部并释放按钮，则会触发容器处理程序。

我不在乎内容中的事件，但是在这种情况下，我需要停止事件通过容器传播。

我做了一个小提琴来测试它： https://jsfiddle.net/Lq7v50nw/

JS：

$('#container').on('click', function(){
alert('click in container')
});
$('#content').on('click', function(ev){
ev.stopPropagation();
alert('click in content')
});

HTML

<div id="container">
  <div id="content"></div>
</div>

反正有实现这种行为的方法吗？谢谢。

编辑（有关我已经尝试过的内容的更多信息）更改mousedown的点击事件。问题在于他们需要在内容内部单击并拖动，有时拖动到内容之外会触发容器处理程序。我无法使用mousedown。

Answer 1

您需要停止使用本机“ click”事件，并以某种方式实现自己的合成“ click”事件。您需要同时聆听“ mousedown”和“ mouseup”，才能模仿“ click”。

想法是在“ mousedown”内部附加一个一次性的“ mouseup”处理程序，以合成完整的“ click”。

如果您在#content中“鼠标按下”，则stopPropagation并将“ mouseup”仅仅附加到#content上。这样，由于#container没有附加“鼠标”，因此无法在其上触发此类合成“点击”。

Answer 2

也许您可以通过“ mousedown”解决问题？

$('#container').on('mousedown', function(ev){
ev.stopPropagation();
alert('click in container')
});

$('#content').on('mousedown', function(ev){
ev.stopPropagation();
alert('click in content w2')
});

它立即触发

Answer 3

尝试结合使用keyup和mosuseup

 $('#container').on('keyup', function(ev){
    alert('click in container');
ev.stopPropagation();
});

$('#content').on('mouseup', function(ev){
    ev.stopPropagation();
    alert('click in content')
});

我希望这会有用。

当您向外释放鼠标时，如何停止点击传播

3 个答案: