0

我创建了一个带有 ID 的 SVG 元素。我想mouseout在它生成之后动态地应用鼠标事件函数（例如），通过它的id（getElementById）访问它。

我尝试了以下方法：

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

以及以下内容：

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

但这些都不起作用。

4

1 回答 1

0

您在第一个示例中非常接近，但是有一些不同的问题会阻止它按预期工作。

首先，该onmouseout属性期望被分配一个包含一些 JavaScript 代码的字符串，而不是实际的 JavaScript 函数。您可以直接使用addEventListener方法而不是方法来分配 JavaScript 函数setAttribute。这也将允许同时应用多个事件处理程序。

第二个问题是您如何引用希望用作事件处理程序的函数。当你在函数名后面加上括号时，这意味着函数将在你的调用中执行，但你真正想要做的是将函数作为参数传递，以便以后调用它。最终调用您的函数的代码（在您的情况下将是 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
);

您可以在MDN 文章中了解有关Event传递给事件处理程序的对象以及一般事件处理的更多信息。特别是，该事件导致将对象传递给事件处理程序。EventmouseoutMouseEvent

额外的true参数 to是事件处理如何工作的详细信息，如果您有兴趣，可以在此方法的文档中addEventListener阅读。

于 2013-03-30T08:41:30.087 回答