停止从单击处理程序传播mousedown / mouseup

这是一个DEMO 。

我有两个divs ，一个内部和一个外部：

使用一些CSS，你可以看到哪个是：

 #outer { width: 250px; height: 250px; padding: 50px; background: yellow; } #inner { width: 250px; height: 250px; background: blue; } 

我尝试停止在click处理程序中传播mousedown和mouseup事件，如下所示：

 $('#inner').on('click', function(e) { e.stopPropagation(); $(this).css({'background': 'green'}); return false; }); $('#outer').on('mousedown', function(e) { $(this).css({'background': 'green'}); }); $('#outer').on('mouseup', function(e) { $(this).css({'background': 'yellow'}); }); 

这似乎不可能。 什么工作是从其他mousedown和mouseup调用中调用.stopPropagation ，如此处所示（ 另一个DEMO） ：

 $('#inner').on('mousedown', function(e) { e.stopPropagation(); return false; }); $('#inner').on('mouseup', function(e) { e.stopPropagation(); return false; }); 

我可能已经回答了我自己的问题，但我不确定我的方法是最好的还是最合理的。 这是阻止事件冒泡到mousedown和mouseup的正确方法吗？

Answer 1

是。 由于mouseclick和mousedown / mouseup是不同的事件，你根本无法从另一个事件中获取 – 你必须在你自己的mousedown / mouseup处理程序中完成它。 您可以做的是将其重构为在两个地方使用的generics方法：

 stopPropagation('#inner', 'mousedown'); stopPropagation('#inner', 'mouseup'); function stopPropagation(id, event) { $(id).on(event, function(e) { e.stopPropagation(); return false; }); }