javascript - 兄弟姐妹上的 mousedown 传播

Question

我有一个 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>

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

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​