Question

I have a div with several img-Objects with position:absolute like so:

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

Now when one of the image’s mousedown handler is called, the event will only bubble down, ignoring the other images, even when they might be behind each other.

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

I tried to nest them to work around this issue, but that didn’t work either:

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

is there any way I can get this to work without manually running a hit-test on every image?

Answer 1

is there any way I can get this to work without manually running a hit-test on every image?

I believe it’s correct that you have to run a hit-test yourself. mousedown only occurs on the front-most element under the mouse pointer, not all elements at those (x, y) coordinates.

In practice, this isn’t so hard. Here’s a working example: http://jsfiddle.net/TrevorBurnham/GBuZz/

In that example, mousedown events are captured on the container element and handled like so:

$('#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​