IE11: Trigger native mouse events with Javascript

Updated . Posted . Visible to the public. Deprecated.

Use the MouseEvent constructor instead.

The attached Coffeescript helper will let you create mouse events:

$element = $('div')
Trigger.mouseover($element)
Trigger.mouseenter($element)
Trigger.mousedown($element)
Trigger.mouseup($element)
Trigger.mouseout($element)
Trigger.mouseleave($element)
Trigger.click($element)

The dispatched events are real DOM events, which will trigger both native and jQuery handlers.
jQuery's .trigger Show archive.org snapshot is simpler, but will only trigger event handlers that were bound by jQuery's .on.

Real user actions trigger multiple events

Many user interactions trigger more than one event. E.g. when the user moves the mouse over a button and "clicks" the mouse, she actually triggers a sequence of events (mouseover, mousedown, focus, mouseup, click).

To help emulate this, the Trigger helper has a couple of additional functions that emit event sequences:

Trigger.clickSequence($element) # triggers mouseover, mousedown, focus, mouseup, click
Trigger.hoverSequence($element) # triggers mouseover, mouseenter
Trigger.unhoverSequence($element) # triggers mouseout, mouseleave

Passing modifiers

You can also pass options, e.g. to simulate a right button click while the CTRL-key was pressed:

Trigger.click(button: 2, ctrlKey: true)

See MDN's full list of options Show archive.org snapshot . Also note that browsers will not execute Javascript for some combinations of modifiers.


This was extracted from Unpoly Show archive.org snapshot .

Henning Koch
Last edit
Henning Koch
Attachments
Keywords
emulate, synthetic, native, real
License
Source code in this card is licensed under the MIT License.
Posted by Henning Koch to makandra dev (2016-04-06 07:40)