How to programmatically fire a dblclick event defined with addEventListener?

javascript events double-click
Stilltorik picture Stilltorik · Aug 23, 2013 · Viewed 20.9k times · Source

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?

Answer

CodingIntrigue picture CodingIntrigue · Aug 23, 2013

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.

Related questions

How to listen for double-click on jstree?

How would I write a listener for a double-click event on a jstree object? (For example, I'd like to double-click on a tree node and paste its anchor's href value into an input field in a form somewhere.)

Read More
Event binding on dynamically created elements?

I have a bit of code where I am looping through all the select boxes on a page and binding a .hover event to them to do a bit of twiddling with their width on mouse on/off. This happens …

Read More
jQuery Event Keypress: Which key was pressed?

With jQuery, how do I find out which key was pressed when I bind to the keypress event? $('#searchbox input').bind('keypress', function(e) {}); I want to trigger a submit when ENTER is pressed. [Update] Even though I found …

Read More