SVG-单击不是功能[重复]

Question

我有一个这样的元素。

<g id="box_w" onclick="recordResponseKeyboard('W');" onmousedown="svgFill('W');" onmouseup="svgUnfill('W');"> 
    <rect fill="#FFFFFF" height="68.522" stroke="#FFFFFF" stroke-miterlimit="10" width="119.297" x="306.673" y="384.406"></rect> 
</g>

从 chrome 控制台，我可以找到元素。

document.getElementById('box_w')

如果我调用点击事件，

document.getElementById('box_w').click()

它会抛出一个错误，点击不是一个函数。

如何使用控制台点击元素。？

Answer 1

click() 是一个仅在 HTML 元素上定义的函数。幸运的是，它是一个方便的函数，我们可以很容易地自己实现它，即

document.getElementById('box_w').dispatchEvent(new Event('click'));

这就是 click() 函数在底层所做的所有事情。

这是一个例子：

document.getElementById('box_w').dispatchEvent(new Event('click'));

<g id="box_w" onclick="alert('hi')"> 
    <rect fill="#FFFFFF" height="68.522" stroke="#FFFFFF" stroke-miterlimit="10" width="119.297" x="306.673" y="384.406"></rect> 
</g>

Answer 2

尝试使用onclick 而不是click。

document.querySelector("g#box_w").onclick();

请记住，我们在这里所做的是调用形状的接口。所以onclick需要在svg中定义，因为它在问题中：

<g id="box_w" onclick="recordResponseKeyboard('W');"></g>