当您在外面释放鼠标时如何停止点击传播答案

【问题标题】：How to stop propagation on click, when you release the mouse outside当您在外面释放鼠标时如何停止点击传播
【发布时间】：2019-04-08 08:42:13
【问题描述】：

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

假设我有两个 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。

【问题讨论】：

我不确定您是否可以通过单击或 mousedown 事件为您的特定用例实现此目的。不过，您可以尝试同时跟踪 mousedown 和 mouseup 事件，并使用代码检查第一次单击的元素以及释放鼠标的位置。
这是我尝试的第一件事。这样做的问题是他们需要在内容内单击并拖动，有时超出内容的拖动会触发容器处理程序。我不能使用 mousedown。
我认为您不能在“内容级别”上执行此操作，因为从技术上讲，您确实可以单击容器。您只能在“容器级别”停止点击传播。在这种情况下，Mousedown 和 MouseUp 事件对您没有帮助。

标签： javascript jquery

【解决方案1】：

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

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

如果您在#content 中“mousedown”，则您stopPropagation 并将“mouseup”仅附加到#content。这样一来，因为#container 没有附加“mouseup”，所以这种合成的“click”不会触发它。

【讨论】：

我很确定这不会阻止 click 事件在容器上触发。它将模拟对内容 div 的单击，但是当您将鼠标放在内容上并鼠标放在容器上时，仍然会在容器上触发单击。
@Preli 你指的是我的部分解决方案还是完整的想法？
您的完整想法。我有相同/相似的想法，甚至尝试在 jsfiddle 中实现它。但是不管你对 mouseodwn 或 mouseup 事件做什么，容器上的任何点击处理程序仍然会被触发（如果我理解正确的话，这是 Albeo 想要避免的）
@Preli 你弄错了。完整的想法是一次停止收听“点击”。 OP 需要删除任何现有的“click”侦听器，然后通过一起使用“mousedown”和“mouseup”来实现合成的“click-like”事件。但是您的反馈应该确认我的部分解决方案不起作用。我会删除它。
@Preli 我认为你走在正确的轨道上。我身边没有电脑，只是在手机上打字。如果你得到一个工作代码示例，请发布。

【解决方案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')
});

立即触发

【讨论】：

这是我尝试的第一件事。这样做的问题是他们需要在内容内单击并拖动，有时超出内容的拖动会触发容器处理程序。我不能使用mousedown。谢谢！
好的，也许你需要 jqueryUi。有一个功能叫做可拖动。尝试完全使用它。目前我无法测试它，因为我在我的手机上.. 问候

【解决方案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')
});

希望对你有用。

【讨论】：