添加SVG元素鼠標事件創建後

Question

我創建了一個帶有ID的SVG元素。我想通過訪問它的id（getElementById）動態地應用鼠標事件函數（例如mouseout）。

我曾嘗試以下：

svgDocument.getElementById(selectedId).setAttribute(
    'onmouseout', DeselectedPointMouseOut(selectedId) 
); 

及以下：

svgDocument.getElementById(selectedId).onmouseout(function()); 

但這些沒有工作。

Answer 1

您在第一個示例中非常接近，但有幾個不同的問題會阻止它按預期工作。

首先，onmouseout屬性期望被分配一個包含一些JavaScript代碼的字符串，而不是實際的JavaScript函數。您可以直接使用addEventListener方法而不是setAttribute方法來分配JavaScript函數。這也將允許同時應用多個事件處理程序。

第二個問題是您如何引用您希望用作事件處理函數的函數。當你在一個函數名字後面寫括號時，這意味着函數將在你的調用中執行，但你實際想要做的是通過函數作爲參數，以便它可以在後面調用。它將是最終調用你的函數的代碼（在你的情況下，它將是SVG渲染器本身，當用戶將鼠標移出元素時）將使用圓括號將一組參數傳遞到你提供的函數中。

最後，事件處理函數具有非常具體的簽名;也就是它期望的一系列論據。它會通過一個Event對象來描述發生事件的一些細節。

把所有這些組合起來，我們可以按照如下調整代碼：

// First define the event handler function. 
function deselectedPointMouseOut(event) { 
    // do your event handling in here 
} 

// Now attach the event handler to the element. 
svgDocument.getElementById(selectedId).addEventListener(
    "mouseout", deselectedPointMouseOut, true 
); 

您可以瞭解更多有關傳遞到您的事件處理程序的Event對象，和一般事件處理，在the MDN article on Event。特別是，mouseout事件導致將MouseEvent對象傳遞給事件處理程序。

多餘的true參數addEventListener是事件處理如何工作的詳細信息，如果您有興趣，可以在the documentation for this method中閱讀。

最新問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 相關問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.