兄弟姐妹上的 mousedown 传播答案

【问题标题】：mousedown propagation on siblings兄弟姐妹上的 mousedown 传播
【发布时间】：2012-07-20 04:20:26
【问题描述】：

我有一个 div 有几个 img-Objects 位置：绝对像这样：

<div>  
    <img>  
    <img>  
    <img>  
    <img>  
</div>

现在，当调用图像的 mousedown 处理程序之一时，事件只会冒泡，而忽略其他图像，即使它们可能在彼此后面。

$('img').mousedown((event) -> if(something) event.stopPropagation());  
$('div').mousedown(-> alert('event came through'));

我试图嵌套它们来解决这个问题，但这也不起作用：

<div>  
    <img>    
    <div>  
        <img>  
        <div>  
            <img> 
            ...   
        </div>  
    </div>  
</div>

有什么方法可以在不手动对每张图像运行命中测试的情况下使其工作？

【问题讨论】：

jsFiddle 会让这个问题更清晰，更容易回答。
@madfriend 基本上图像代表具有透明背景的形状，我只希望在单击形状本身时触发 mousedown 事件，而不是图像的透明部分。这本身并不难做到，但是当另一个图像位于“背景”中时单击透明部分将导致单击事件直接冒泡到容器。
mousedown. propagation on siblings event.targets的可能重复

标签： javascript jquery html coffeescript

【解决方案1】：

有什么方法可以在不手动对每张图像运行命中测试的情况下使其工作？

我认为您必须自己进行命中测试是正确的。 mousedown 仅出现在鼠标指针下最前面的元素上，而不是 (x, y) 坐标处的所有元素。

实际上，这并不难。这是一个工作示例：http://jsfiddle.net/TrevorBurnham/GBuZz/

在该示例中，mousedown 事件在容器元素上被捕获并按如下方式处理：

$('#container').on 'mousedown', (e) ->
  {pageX, pageY} = e
  $(@).children().each (i) ->
    {top, left} = $(@).offset()
    if top <= pageY <= top + $(@).outerHeight() &&
       left <= pageX <= left + $(@).outerWidth()
      console.log 'collision with box ' + i

【讨论】：

理论上，这并不难，是的。但是我需要一种方法来“取消”这个过程，当一个项目满足一个条件时，按照这个顺序从最前面到最后。只冒泡事件并在必要时取消传播是最优雅的，否则让它冒泡到“基础”层。
问题是事件可以从子到父冒泡，或者它们可以从前到后冒泡。两者是互斥的。如果你想要除子到父之外的冒泡逻辑，你必须自己实现它。
我明白了。然后别无选择，只能对每个对象进行“碰撞检查”，如果发现碰撞则中断。我用了你的小提琴，添加了我的碰撞逻辑并颠倒了选择前面项目的顺序。