2

私はいくつかのimgを持つdivを持っています-position：absoluteのようなオブジェクト： 

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

これで、画像のmousedownハンドラーの1つが呼び出されると、イベントはバブルダウンするだけで、他の画像が互いに遅れている場合でも無視されます。 

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

私はこの問題を回避するためにそれらをネストしようとしましたが、それもうまくいきませんでした： 

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

すべての画像に対して手動でヒットテストを実行せずにこれを機能させる方法はありますか？

4

1 に答える 1

3

すべての画像に対して手動でヒットテストを実行せずにこれを機能させる方法はありますか？

自分でヒットテストを実行しなければならないのは正しいと思います。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​
于 2012-07-20T21:37:27.520 に答える