如何以编程方式触发使用 addEventListener 定义的 dblclick 事件? [英] How to programmatically fire a dblclick event defined with addEventListener?

问题描述

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

Javasript:

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

小提琴:http://jsfiddle.net/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: http://jsfiddle.net/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.

这篇关于如何以编程方式触发使用 addEventListener 定义的 dblclick 事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！