Javascript 当您在外部释放鼠标时，如何在单击时停止传播

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

假设我有两个div，一个容器和一个contet

当我在内容中完全单击（mousedown和mouseup）时，我可以使用preventDefault（）停止传播

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

我不关心内容中的事件，但在这种情况下，我需要阻止事件通过容器进行

我做了一把小提琴来测试它：

JS:

HTML

究竟有没有办法做到这一点？ 多谢各位

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

---

我不能使用mousedown。

也许你可以用“mousedown”解决你的问题

---

它会立即触发

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

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

---

如果在#内容中“mousedown”，则停止播放并仅将“mouseup”附加到#内容。这样，因为容器没有“鼠标”连接，所以这种合成的“点击”不可能在容器上触发。

尝试使用keyup和mosuseup的组合

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

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

---

我希望它会有用。

我不确定您是否可以通过单击或鼠标向下事件来实现特定用例的这一点。不过，您可以尝试跟踪mousedown和mouseup事件，并使用代码检查第一次单击哪个元素，以及在哪里释放鼠标。这是我尝试的第一件事。问题是，他们需要在内容内部单击并拖动，有时拖动到内容之外会触发容器处理程序。我不能使用mousedown。我不认为你可以在“内容级别”上这样做，因为从技术上讲，你可以点击容器。您只能在“容器级别”上停止单击传播。在这种情况下，Mousedown和MouseUp事件对您没有帮助。这是我尝试的第一件事。问题是，他们需要在内容内部单击并拖动，有时拖动到内容之外会触发容器处理程序。我不能用鼠标镇。非常感谢。好吧，也许你需要jqueryUi。有一种功能叫做draggable。试着使用它。目前我无法测试它，因为我在打电话。。欢迎我很确定这不会阻止容器上的点击事件。它将模拟对内容div的单击，但当您将鼠标下放到内容上并将鼠标上放到容器上时，仍然会触发对容器的单击。@Preli您指的是我的部分解决方案还是完整想法？您的完整想法。我有同样/类似的想法，甚至尝试在JSFIDLE中实现它。但不管你对mouseodwn或mouseup事件做了什么，容器上的任何点击处理程序都会被触发（如果我理解正确的话，这是Albo希望避免的）@Preli你弄错了。完整的想法是一次停止听“点击”。OP需要删除任何现有的“click”侦听器，然后通过同时使用“mousedown”和“mouseup”实现一个合成的“click-like”事件。但你的反馈应该证实我的部分解决方案不起作用。我会把它取下来的。@Preli我想你走对了。我身边没有电脑，只是在电话上打字。如果你得到一个工作代码示例，请发布。

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

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

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

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

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