鼠标按下传播

Question

我与位置的几个IMG的对象一个div：绝对的，像这样：

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

现在，当图像的鼠标按下处理程序之一被调用时，事件只会泡下来，无视其他图像，即使它们可能在彼此后面。

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

我试图巢他们解决此问题，但没有工作，要么：

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

有什么方法可以让我得到这个无需手动运行命中测试工作在每张图片上？

Answer 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​