Skip to content

Firing DOM mouse events programmatically from JavaScript

Is it possible to programmatically fire mouse events in DOM? My sample case would be the following:

    <iframe style="width: 500px; height: 500px;" src="something.html"></iframe>
    <div id="layer" style="position: absolute; left: 0px; top=0px; width=500px; height=500px;"></div>

Whenever the user clicks the div over an iframe, I would like to somehow propagate the event to the iframe, too. (Here we assume that the iframe src is in the same domain.)


Whilst you can inject events into browsers’ event-handling systems (in not entirely portable ways), it will only cause event handlers registered on those events to be called. It won’t cause default actions like following clicked links. Also you don’t get the target element worked out for you from co-ordinates so you’d have to do that yourself.

A better bet would be to lose the obscuring <div> and register a click handler on the iframe’s document, which then informs code in the parent of the location of the click.