爲什麼在別處點擊鼠標時觸發onmousedown？

我有一個div與一個onmousedown事件，但它觸發時，我點擊遠離div。這個屏幕截圖顯示了我剛剛在廣場上點擊並註冊了一個mousedown。我認爲我有足夠的註釋足夠有幫助...雖然我不小心寫了「Picker」而不是「Switcher」...我已經確認「Picker」不在我的代碼中。爲什麼在別處點擊鼠標時觸發onmousedown？

如果你看the page, active on my server你可以自己複製它。它不會一直髮生，但是會發生。右側的div填充每個事件的一個字母，並且由於某種原因而未被取消，這是我用來診斷問題的原因。

我是一個新用戶（sory--新的一般，所以沒有回答或問任何問題），所以不能發佈圖片。
編輯：以下是圖像：

enter image description here

#colourSwitcherMapBox { 
    position: absolute; 
    left: 5px; 
    top: 5px; 
    height: 256px; 
    width: 256px; 
    display: block; 
    background-color: orange; 
} 
#colourSwitcherMapMark { 
    position: absolute; 
    height: 15px; 
    width: 15px; 
    top: -8px; 
    left: 248px; 
    z-index: 3; 
    display: block; 
} 
#colourSwitcherMapBox div { 
    position: absolute; 
    height: 256px; 
    width: 256px; 
    top: 0; 
    left: 0; 
} 

<div id="colourSwitcherContainer" class="colourSwitcherStuff" onmousedown="colourSwitcherDrag(event);"> 
    Colour Switcher:<input type="checkbox" onclick="toggleColourSwitcher(this.checked);" /> 
    <div id="mainColourSwitcher"> 
    <div id="colourSwitcherMapBox" onmousedown="colourSwitcherDragMap(event);"> 
     <div id="colourSwitcherMapMark"><img src="imagesCP/mapIndicator.png" alt="" /></div> 
     <div id="colourSwitcherMaxB"><img src="imagesCP/map-blue-max.png" alt="" /></div> 
     ... lots more divs identical to the last line other than image and ... 
    </div> 
    ... other stuff (colourSwitcherBarBox and colourSwitcherPickInfo) ... 
    </div> 
</div> 

function colourSwitcherDragMap (event) { 
    if (!event) {var event = window.event;} 
    if (event.preventDefault) {event.preventDefault();} else { event.returnValue = false; } 
    document.body.onmousemove = colourSwitcherChangeBar; 
    document.body.onmouseup = colourSwitcherStopDragging; 
    document.getElementById("randomblob").innerHTML += "M "; 
    colourSwitcherChangeBar (event); 
}

來源

2011-07-15 Tristan Ridley

colourSwitcherMapMark不慎從這個規則拿起的高度和寬度256PX：

#colourSwitcherMapBox div { 
    height: 256px; 
    ...

使得它比大得多它需要。因此，如果標記靠近顏色區域的底部，則它將懸掛在colourSwitcherContainer的邊緣並拾取點擊。我不認爲你打算這個規則匹配MapMark;你將不得不使其更具體，只拿起你想要的主要部分。

來源

2011-07-15 21:39:24 bobince

謝謝！手動檢查450行Javascript後，它是CSS優先。固定！ –

，它的發生是因爲「colourSwitcherMapMark」 <div>，這是詞彙裏的其他<div>（「colourSwitcherMatchBox」），但絕對定位的外它。基於元素之間的詞彙關係，而不是屏幕位置，事件會使DOM膨脹起來。因此，當你點擊那裏時，即使<div>沒有事件處理程序，瀏覽器將它放在DOM樹上，以查看是否有父元素需要它。

您可以在處理程序中檢查事件對象的「目標」屬性，以確保點擊發生在您希望發生的位置，但對我而言，其他<div>的位置無論如何都沒有多大意義。

使用類似Firebug或Chrome開發人員工具的「HTML」或「元素」視圖可以顯示頁面上的哪些元素。

來源

2011-07-15 21:25:57 Pointy

在這種情況下，我特別希望事件能夠通過那個小的圓形分區，但謝謝！ –

好吧，沒關係，但那絕對是發生了什麼事。薄色「區域」欄的「南側」區域是「MapMark」元素所在的位置。 – Pointy

你需要停止使用event.stopPropagation（）來「冒泡」dom的點擊。 IE處理事件的方式與其他人不同，所以你需要編寫代碼來處理這兩個事件。下面是我的工具箱中的一些代碼 - 它已經兩年了，但我仍然使用它，並沒有任何問題。

function myclick(e){ 
    if(e && e.stopPropagation) { 
     // Everyone but IE 
     e.stopPropagation(); 
    } 
    else { 
     // IE 
     e = window.event; 
     e.cancelBubble = true; 
    } 
}

編輯 - 這是一個很好的不得已而爲之，但馬特在評論中指出，您應該仔細檢查你的應用程序的設計，看看是否有更好的方法來組織你的div讓你不不必與瀏覽器的事件處理內部結構相混淆。

來源

2011-07-15 21:31:36

考慮節點之間的事件依賴性時，殺死事件既昂貴又危險。 – 2011-07-15 21:44:13

@Matt - 同意，但在用戶發佈的程序的上下文中，似乎可以。我會告訴你我的回答。謝謝！ –

如果點擊外部點擊事件處理程序，那麼該區域是您掛鉤事件處理程序的元素的一部分。

您在div上有這些事件處理程序。其他領域似乎很清楚，但他們都在divs內部。

您應該能夠看到他們使用FireBug覆蓋哪個區域，例如，

解決方案是通過特定的寬度和高度來限制div。

來源

2011-07-15 21:41:41 kheya

它們已經被限制在CSS中......不正確。謝謝，雖然！ –

您的#colourSwitcherMapMark選擇器不夠強壯，所以div實際上是256x256而不是15x15。將其更改爲div#colourSwitcherMapMark。

來源

2011-07-15 21:47:05 gilly3

謝謝！我做了#colourSwitcherMapBox #colourSwitcherMapMark，它非常強大而且非常具體。 –

爲什麼在別處點擊鼠標時觸發onmousedown？

回答

相關問題