305

I have a hyperlink in my page. I am trying to automate a number of clicks on the hyperlink for testing purposes. Is there any way you can simulate 50 clicks on the hyperlink using JavaScript?

<a href="#" target="_blank" onclick="javascript:Test("Test");">MSDN</a>

I'm looking for onClick event trigger from the JavaScript.

9 Answers 9

397

Performing a single click on an HTML element: Simply do element.click(). Most major browsers support this.


To repeat the click more than once: Add an ID to the element to uniquely select it:

<a href="#" target="_blank" id="my-link" onclick="javascript:Test('Test');">Google Chrome</a>

and call the .click() method in your JavaScript code via a for loop:

var link = document.getElementById('my-link');
for(var i = 0; i < 50; i++)
   link.click();
5
  • 1
    NB this is for quick testing purpose. For a more robust, standard-compliant, cross-browser solution, see Juan's answer. Commented Sep 2, 2014 at 11:52
  • 6
    I don't understand the loop and this didn't work on mobile.
    – im_benton
    Commented Jan 11, 2016 at 22:33
  • @im_benton: The loop was for OP's specific needs. If you just need to trigger a click event, you can omit the line that begins with for(.
    – rinogo
    Commented Jul 7, 2017 at 17:35
  • How can same Id be given to more than one element. This is not correct. use class selector for accomplishing your task. more than one element can have same class. but more than one element cannot have same Id value
    – Parag
    Commented Nov 12, 2021 at 6:08
  • 1
    @Parag: Read it again. The loop is to click the same link 50 times, which is what it does. Commented Jan 13, 2022 at 22:17
122

You should just use click. For more advanced event firing, use dispatchEvent.

const body = document.body;

body.addEventListener('click', e => {
  console.log('clicked body');
});

console.log('Using click()');
body.click();

console.log('Using dispatchEvent');
body.dispatchEvent(new Event('click'));

Original Answer - Obsolete

Here is what I use for IE9+ http://jsfiddle.net/mendesjuan/rHMCy/4/

/**
 * Fire an event handler to the specified node. Event handlers can detect that the event was fired programatically
 * by testing for a 'synthetic=true' property on the event object
 * @param {HTMLNode} node The node to fire the event handler on.
 * @param {String} eventName The name of the event without the "on" (e.g., "focus")
 */
function fireEvent(node, eventName) {
    // Make sure we use the ownerDocument from the provided node to avoid cross-window problems
    var doc;
    if (node.ownerDocument) {
        doc = node.ownerDocument;
    } else if (node.nodeType == 9){
        // the node may be the document itself, nodeType 9 = DOCUMENT_NODE
        doc = node;
    } else {
        throw new Error("Invalid node passed to fireEvent: " + node.id);
    }

     if (node.dispatchEvent) {
        // Gecko-style approach (now the standard) takes more work
        var eventClass = "";

        // Different events have different event classes.
        // If this switch statement can't map an eventName to an eventClass,
        // the event firing is going to fail.
        switch (eventName) {
            case "click": // Dispatching of 'click' appears to not work correctly in Safari. Use 'mousedown' or 'mouseup' instead.
            case "mousedown":
            case "mouseup":
                eventClass = "MouseEvents";
                break;

            case "focus":
            case "change":
            case "blur":
            case "select":
                eventClass = "HTMLEvents";
                break;

            default:
                throw "fireEvent: Couldn't find an event class for event '" + eventName + "'.";
                break;
        }
        var event = doc.createEvent(eventClass);
        event.initEvent(eventName, true, true); // All events created as bubbling and cancelable.

        event.synthetic = true; // allow detection of synthetic events
        // The second parameter says go ahead with the default action
        node.dispatchEvent(event, true);
    } else  if (node.fireEvent) {
        // IE-old school style, you can drop this if you don't need to support IE8 and lower
        var event = doc.createEventObject();
        event.synthetic = true; // allow detection of synthetic events
        node.fireEvent("on" + eventName, event);
    }
};

Note that calling fireEvent(inputField, 'change'); does not mean it will actually change the input field. The typical use case for firing a change event is when you set a field programmatically and you want event handlers to be called since calling input.value="Something" won't trigger a change event.

5
  • 1
    Hey Juan! Your example doesn't define JSUtil.NodeTypes.DOCUMENT_NODE
    – Kato
    Commented May 13, 2011 at 21:52
  • I know that the question is about clicking events but you provided some generic code here and what I can see the change events are not going to be fired (I tested it and this does not really works for such events). To trigger change events I had to use jquery trigger function. Commented Feb 1, 2016 at 16:58
  • @AleksanderLech Just firing an event does not guarantee that the action will take place. It does for click, it does not for change. The use case for events where change doesn't work is when you want to make a change to its value, but you want all the change event handlers to be called (whether they were set with jQuery or not). I can provide more meaningful help if you ask a new question with the exact code you were trying but wasn't working. Commented Feb 1, 2016 at 17:38
  • Thanks for the fast response. I was able to get the change event running after few modifications to your snippet: 1) var node = document.getElementById(originalEvent.srcElement.id); 2) event.initEvent(eventName, true, true); //I don`t know why you disabled bubbling for change events. Please tell me what you think. Commented Feb 2, 2016 at 9:47
  • 1
    For anyone facing the same issues as me: using el.dispatchEvent(new Event('click')) won't bubble up. For that to work you need to specify "bubble" behavior in the event constructor: new Event('click', { bubble: true })
    – nicojs
    Commented Nov 11, 2021 at 7:45
43

What

 l.onclick();

does is exactly calling the onclick function of l, that is, if you have set one with l.onclick = myFunction;. If you haven't set l.onclick, it does nothing. In contrast,

 l.click();

simulates a click and fires all event handlers, whether added with l.addEventHandler('click', myFunction);, in HTML, or in any other way.

2
  • 1
    FWIW this only works on an element level. If you add a click event to the window object, it won't magically expose a window.click function. Commented Mar 20, 2017 at 10:42
  • @JamesDonnelly It doesn't have to do with handlers being attached, not all elements supported the click method, only the ones that inherit HTMLElement.click Window is not an HTMLElement Commented Aug 25, 2020 at 18:05
21

I'm quite ashamed that there are so many incorrect or undisclosed partial applicability.

The easiest way to do this is through Chrome or Opera (my examples will use Chrome) using the Console. Enter the following code into the console (generally in 1 line):

var l = document.getElementById('testLink');
for(var i=0; i<5; i++){
  l.click();
}

This will generate the required result

0
14

.click() does not work with Android (look at mozilla docs, at mobile section). You can trigger the click event with this method:

function fireClick(node){
    if (document.createEvent) {
        var evt = document.createEvent('MouseEvents');
        evt.initEvent('click', true, false);
        node.dispatchEvent(evt);    
    } else if (document.createEventObject) {
        node.fireEvent('onclick') ; 
    } else if (typeof node.onclick == 'function') {
        node.onclick(); 
    }
}

From this post

2
  • 1
    I was trying jQuery's trigger click but found that it ends up calling the callback rather than dispatching actual event on the DOM. @manolo your method is correct. Commented May 4, 2017 at 9:07
  • ".click() does not work with Android" Actually, the latest table says "Compatibility unknown". Commented Jun 30, 2018 at 13:52
10

IE9+

function triggerEvent(el, type){
    var e = document.createEvent('HTMLEvents');
    e.initEvent(type, false, true);
    el.dispatchEvent(e);
}

Usage example:

var el = document.querySelector('input[type="text"]');
triggerEvent(el, 'mousedown');

Source: https://plainjs.com/javascript/events/trigger-an-event-11/

0
9

Use a testing framework

This might be helpful - http://seleniumhq.org/ - Selenium is a web application automated testing system.

You can create tests using the Firefox plugin Selenium IDE

Manual firing of events

To manually fire events the correct way you will need to use different methods for different browsers - either el.dispatchEvent or el.fireEvent where el will be your Anchor element. I believe both of these will require constructing an Event object to pass in.

The alternative, not entirely correct, quick-and-dirty way would be this:

var el = document.getElementById('anchorelementid');
el.onclick(); // Not entirely correct because your event handler will be called
              // without an Event object parameter.
0
8

Please call trigger function any where and button will click.


<a href="#" id="myBtn" title="" >Button click </a>

function trigger(){
    document.getElementById("myBtn").click();
}
1

Fair warning:

element.onclick() does not behave as expected. It only runs the code within onclick="" attribute, but does not trigger default behavior.

I had similar issue with radio button not setting to checked, even though onclick custom function was running fine. Had to add radio.checked = "true"; to set it. Probably the same goes and for other elements (after a.onclick() there should be also window.location.href = "url";)

1
  • Indeed, using onclick() would mean the event object will not be automatically defined by the browser, so common methods like event.stopPropagation()will also be undefined.
    – Boaz
    Commented Feb 19, 2015 at 9:37

Not the answer you're looking for? Browse other questions tagged or ask your own question.