Question

我有一个带有几个img-object的div，其位置为：绝对如此：

<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

在兄弟姐妹身上传播

1 个答案: