이는 MouseDown 전파

Question

나는 위치에 여러 IMG-객체와 사업부가 : 이벤트는 버블 아래, 무시됩니다 이미지의 이는 MouseDown 핸들러 중 하나가 호출 이제

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

: 절대과 같이 다른 이미지들, 심지어 서로 뒤에있을 수도 있습니다.

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