鼠標按下傳播

我與位置的幾個IMG的對象一個div：絕對的，像這樣：鼠標按下傳播

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

有什麼方法可以讓我得到這個無需手動運行命中測試工作在每張圖片上？

來源

2012-07-20 Manuel Schweigert

你想達到什麼樣的？ – madfriend 2012-07-20 21:24:22

[jsFiddle]（http://jsfiddle.net/）會使這個問題更加清晰和容易回答。 – 2012-07-20 21:27:46

@madfriend基本上這些圖像代表具有透明背景的形狀，而我只希望在單擊形狀本身時觸發mousedown事件，而不是圖像的透明部分。這本身並不難做到，但如同我所說，在另一個圖像位於「背景」中時單擊透明部分將導致直接向容器冒泡的單擊事件。 – 2012-07-20 22:20:46

有沒有什麼辦法可以在沒有手動運行每個圖像的命中測試的情況下工作？

我相信這是正確的，你必須自己運行一次命中測試。 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-20 21:37:27

理論上，這並不是很難，是的。但是我需要一種方法來取消這個過程，當條件滿足時，從一個項目的最前面到最後面。如果有必要的話，在事件中冒泡並取消傳播將是最優雅的，否則讓它冒泡到「基礎」層。 – 2012-07-20 22:15:58

問題是事件可能會從孩子到父母冒泡，或者他們可能從前到後冒泡。這兩者是相互排斥的。如果你想要冒泡的邏輯，而不是孩子到父母，你必須自己實現它。 – 2012-07-20 23:30:00

我明白了。別無選擇，只能對每個對象執行「碰撞檢查」，然後在發現碰撞時斷開。我用你的小提琴，添加了我的碰撞邏輯，並顛倒了順序來選擇前面的項目。 – 2012-07-20 23:54:00

鼠標按下傳播

回答

相關問題