是否可以在 SVG 标签上使用点击功能？我在 <polygon> 上尝试了 element.click()。尝试使用 javascript 模拟点击。不工作
Posted
技术标签:
【中文标题】是否可以在 SVG 标签上使用点击功能？我在 <polygon> 上尝试了 element.click()。尝试使用 javascript 模拟点击。不工作【英文标题】：Is it possible to use click function on SVG tags? I tried element.click() on a <polygon>. Trying to simulate the click using javascript. Doesn't work 【发布时间】：2018-09-08 22:23:43 【问题描述】：//尝试从下面的 html 中检索 HTML 元素并尝试使用下面的 javascript 代码点击它
<html>
<svg >
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</html>
<script>
var polygons = document.getElementsByTagName('polygon');
if(polygons.length>0)
//This statement doesn't work. Trying to simulate the click on the polygon element. The click function doesn't click it
polygons[0].click();
</script>
【问题讨论】：
click() 应该做什么？您是否想在单击多边形时运行一些 javascript，如果是，请为单击事件添加 onclick 属性或事件处理程序。 感谢罗伯特的回复。我正在尝试使用 DOM click 函数使用 javascript 来模拟对多边形元素的点击。但它没有点击。我尝试使用 onclick 功能进行日志记录，但没有创建任何日志。提前致谢。 当你点击一个多边形时会发生什么，你会调用一些javascript函数吗？如果是这样，只需直接调用该 javascript 函数。 我正在尝试使用 WPT 进行一些自动化，以进行需要单击它的性能测试。为此，我正在使用 javascript 模拟点击。单击时会调用其他函数。再次感谢。 手动点击时通常会发生什么？直接在您的 WPT 中调用这些函数。 【参考方案1】：与我的同伴相反，我会故意和善意地忽略您没有设置点击事件侦听器这一事实，而是会回答大家在这里错过的问题。
您尝试使用的click 方法是HTMLElement.click 方法。
此方法适用于所有继承自 HTMLElement 的元素，但您的 <polygon> 是一个 SVGPolygonElement，它不继承自 HTMLElement。
所以不，你不能在这个元素上使用这个方法，因为它的原型链中没有定义这样的方法。
// an SVGElement
var poly = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
// an HTMLElement
var unknown = document.createElement('foo');
console.log('<polygon> (SVG element)');
console.log('has click method:', !!poly.click);
console.log('inherits from HTMLElement:', poly instanceof HTMLElement);
console.log('//////////////////');
console.log('<foo> (HTML element)');
console.log('has click method:', !!unknown.click);
console.log('inherits from HTMLElement:', unknown instanceof HTMLElement);但即使此方法不可用，您也可以通过编程方式触发点击事件，例如使用EventTarget.dispatchEvent 方法。
var poly = document.getElementById('poly');
poly.dispatchEvent(new Event('click'));
function _log(evt)
console.log('clicked');
<svg>
<polygon id="poly" points="60,20 100,40 100,80 60,100 20,80 20,40" onclick="_log()"/>
</svg>或者由于您的问题似乎与 WPT 有关（我真的不知道），您似乎也可以使用 sendClick 方法做同样的事情，但再一次，我不知道 WPT 并且我刚从快速阅读的文档中得到它。
【讨论】：
谢谢凯多。这清楚地回答了我的问题。非常感谢。【参考方案2】：是的，这很有可能，但您必须先向多边形添加一个事件侦听器：
document.querySelector('polygon').addEventListener('click', () => console.log('clicked'));<svg >
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>【讨论】：
这不能回答 OP 的问题。 OP 希望以编程方式触发元素上的单击事件。没有抓到一个。以上是关于是否可以在 SVG 标签上使用点击功能？我在 <polygon> 上尝试了 element.click()。尝试使用 javascript 模拟点击。不工作的主要内容，如果未能解决你的问题，请参考以下文章
使用 onclick 使 svg 图像对象可点击，避免绝对定位