mousedown在兄弟姐妹上的传播

mousedown propagation on siblings

本文关键字：传播 兄弟姐妹 mousedown      更新时间：2024-01-11

我有一个div，里面有几个img对象，位置：absolute like so：

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

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

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

我认为你必须自己进行命中率测试是正确的。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​
相关文章：