8

Is it possible to simulate a click on a webpage using javascript but without defining a specific element, but rather just specifying the document?

I would have liked to do something like this, and if the location happens to have a link, then this will be pressed:

function simulateClick(x, y) 
{
    var evt = window.createEvent("MouseEvents");
    evt.initMouseEvent("click", true, true, window,
        x, y, x, y, 1, false, false, false, false, 0, null);

    window.dispatchEvent(evt);
}
Charlie
  • 335
  • 1
  • 6
  • 11

2 Answers2

9

window.dispatchEvent should do the trick.

<script>
function simulateClick() {
  var evt = document.createEvent("Events");
  evt.initEvent("click", true, true);
  window.dispatchEvent(evt);
}
addEventListener('click',function(){alert('test');},false);
</script>
<button onclick="simulateClick();">Go</button>

Or... with extra MouseEvents information:

<script>
function simulateClick() {
  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("click", true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null);
  window.dispatchEvent(evt);
}
addEventListener('click',function(){alert('test');},false);
</script>
<button onclick="simulateClick();">Go</button>

The above examples will cause a click to be simulated on window when the button is clicked. An event listener is added to window to alert when clicked, so therefore clicking the button will indirectly trigger an alert.

More info: http://www.howtocreate.co.uk/tutorials/javascript/domevents

pbarry
  • 3
  • 2
Delan Azabani
  • 79,602
  • 28
  • 170
  • 210
0

In case anyone bumps into this looking for a framework agnostic way to fire any HTML and Mouse event (and set some options, if needed), have a look here: How to simulate a mouse click using JavaScript?

Community
  • 1
  • 1
TweeZz
  • 4,779
  • 5
  • 39
  • 53
  • 1
    Over the past hour or so we've noticed you posting the same answer to a number of questions. Whilst we appreciate your efforts to arrive at the solution you describe, it would be more helpful if you could word your answers to address the OP's specific problem rather than posting the same boilerplate answer. Failure to do so may attract downvotes as other users may view these boilerplate answers as "spammy". – Kev May 27 '11 at 23:43
  • 1
    Furthermore, the same boilerplate answer in reply to this question http://stackoverflow.com/questions/6157162 isn't related to the OP's question which is about how to hook up event handlers and not about how to simulate clicking on a page element. Again, please take more time and care to ensure your answer is relevant. Thanks. – Kev May 27 '11 at 23:47
  • Hi Kev, that last one I just deleted. Right you are, I got over enthusiastic. Often the question was more specific then the solution (question to simulate a click, keydown, ...). I thought that would be ok, since it can handle more then what was requested. The thing I did was make a search for [javascript] +simulate event (if I remember correct, it was late at night). When I was once looking for an answer on how to simulate a click on a link, I bumped into kangax solution. Personally I was very happy to find a solution that can handle more then I needed and stayed relatively light.. – TweeZz May 28 '11 at 06:13
  • I did it with the best intention, I hope that that is most important? I'm sorry about that wrong one. If you would find any other, pls do let me know. – TweeZz May 28 '11 at 06:16
  • I'm ok that you did this with good intent, just try and tailor the answers to the situation (I realise that can be hard when you have a solution that can apply to a wide spectrum of scenarios). The OP's and other users like this because it looks as if you've spent a bit of time on their behalf. Thanks. – Kev May 28 '11 at 11:58
  • Would it have been ok for you if for example someone would ask to simulate a mousedown event on a link that I would have there exactly the same as now, but just mention that that person could simulate what he needs with that function by doing something like: simulate(document.getElementById('idOfALinkElement'), 'mousedown'); ? So basically the same boilerplate answer as now, just adding the specific call they requested? – TweeZz May 28 '11 at 12:14