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

Question

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

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

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

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

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

我做了一个小提琴来测试它：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的click事件。问题在于他们需要在内容内单击并拖动，有时拖动到内容之外会触发容器处理程序。我无法使用mousedown。

Answer 1

您需要停止使用本机的“ click”事件，并以某种方式实现自己的合成“ click”事件。您需要同时聆听“ mousedown”和“ mouseup”，才能模仿“ click”。想法是在“ mousedown”内部附加一个一次性的“ mouseup”处理程序，以合成完整的“ click”。如果“鼠标按下”在＃内容，你stopPropagation并附加“鼠标松开”只给＃内容。这样，由于#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&nbsp;$('#container').on('keyup', function(ev){&nbsp; &nbsp; alert('click in container');ev.stopPropagation();});$('#content').on('mouseup', function(ev){&nbsp; &nbsp; ev.stopPropagation();&nbsp; &nbsp; alert('click in content')});我希望这会有用。