如何以编程方式触发使用 addEventListener 定义的 dblclick 事件?

本文介绍了如何以编程方式触发使用 addEventListener 定义的 dblclick 事件?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

对于 JS 单元测试，我需要检查双击行为是否符合预期.问题是该事件是通过 element.addEventListener 注册的.出于某种原因，在这种情况下， element.ondblclick() 不起作用.HTML:

Javasript:

document.getElementById('aa').addEventListener("dblclick", function(){alert('aa')});document.getElementById('aa').ondblclick();

小提琴:jsfiddle/prZKy/

如果您双击图像，它可以工作，但 javascript 中的 ondblclick() 不起作用.

有人知道怎么做吗?

解决方案

您可以使用 dispatchEvent 以编程方式触发事件:

var event = new MouseEvent('dblclick', {视图":窗口，'泡泡':真的，'可取消':真});document.getElementById('aa').dispatchEvent(event);

请参阅 MDN.

这里是一段正在运行的代码.

For JS Unit test, I need to check that a double-click behaves as expected. The issue is that the event was registered via element.addEventListener. And for some reason, in this case, element.ondblclick() does not work. HTML:

<input type="image" src="pic.jpg" id="aa"/>

Javasript:

document.getElementById('aa').addEventListener("dblclick", function(){alert('aa')}); document.getElementById('aa').ondblclick();

Fiddle: jsfiddle/prZKy/

If you double click on the image, it works, but the ondblclick() in the javascript does not work.

Anyone has an idea on how to do it?

解决方案

You can use dispatchEvent to programatically trigger events:

var event = new MouseEvent('dblclick', { 'view': window, 'bubbles': true, 'cancelable': true }); document.getElementById('aa').dispatchEvent(event);

See the section "Triggering built-in events" on MDN.

Here is a fiddle of the code in action.