我目前正面臨着javascript中的問題和的onmouseover鼠標事件:JavaScript的鼠標事件偵聽
- 我有一個元素(SVG矩形),它調用一個函數,當鼠標移動到
- 我有第二個元素(PNG圖像)高於這個矩形(但比直角小)
而問題是,當鼠標在圖像上,矩形不會調用該函數。
這就像圖像正在攔截事件而不採取任何措施。
我知道我可以將事件添加到圖像來解決問題,但有什麼辦法可以讓鼠標事件的圖像類型爲「透明」並將鼠標懸停事件轉移到底下的元素?
謝謝你,我道歉我的英語
我目前正面臨着javascript中的問題和的onmouseover鼠標事件:JavaScript的鼠標事件偵聽
而問題是,當鼠標在圖像上,矩形不會調用該函數。
這就像圖像正在攔截事件而不採取任何措施。
我知道我可以將事件添加到圖像來解決問題,但有什麼辦法可以讓鼠標事件的圖像類型爲「透明」並將鼠標懸停事件轉移到底下的元素?
謝謝你,我道歉我的英語
有此問題沒有標準溶液。您可以使用jQuery mouseenter/mouseleave事件來解決這個問題,或者您必須編寫一個函數來檢測盒子的尺寸和座標,並自己檢查鼠標位置。
看看這裏的一個例子:JavaScript mouseover/mouseout issue with child element
capture標誌,addEventListener中的第三個參數呢? –
捕獲標誌不能解決問題。另外addEventListener不適用於IE <9,因此對於IE8或更低版本,您必須根據兼容性要求使用attachEvent()。點擊這裏查看更多關於addEventListener的信息:https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener – Tyr
你可能想嘗試的CSS屬性指針的事件:
img.overlay {
pointer-events: none;
}
「CSS屬性指針事件允許作者在什麼情況下控制(如果有的話),一個特定的圖形元素可以成爲鼠標事件的目標當這個屬性是未指定的時,visiblePainted值的相同特徵適用於SVG內容
除了指示該元素不是鼠標事件的目標,值none指示鼠標事件「穿過」元素,並指定該元素下面的任何內容。 (Source: MDN)
試過但仍然是同樣的問題:當鼠標移過圖像時,矩形正在發射一個鼠標事件 –
我找到了一個解決方案:我在另外兩個元素上面創建另一個透明矩形來捕獲事件。最後一個矩形與第一個矩形同時移動,從而產生第一個捕捉鼠標事件的錯覺。
歡迎來到SO。撇開語言,可能有助於澄清,如果你添加一些代碼到你的問題來演示 – geedubb