Trigger a button click from a non-button element

Question

How would you trigger a click event from an element that supposedly does not have native clickable behaviours?

For example, I know that you could simply just use the following:

document.getElementById('x').click();

But what happens if 'x' is a 'DIV'? I have an implementation, and it doesn't seem to trigger... I get the error (chrome 12):

Uncaught TypeError: Object #<HTMLDivElement> has no method 'click'

Ideas?

Quick Edit - I'm looking for vanilla JS here... I like reinventing the wheel in my image... :-)

Fcc

Read the jQuery source and see how they do it. – Rollo

The correct, HTML5 method is click but I definitely see this same problem in Chrome 12. – Jahn

@Peter - Lol, Good point... Worth a lookup... – Fcc

possible duplicate of How to simulate mouse click using Javascript? – Labiovelar

Answer 1

For classic clickable elements like buttons or links, click() should work in all browsers. However for other elements like divs, you need onclick() in some browsers and click() in others.

I would strongly recommend that instead of trying to figure this out for yourself, you use a javascript library such as MooTools, jQuery, Prototype, YUI, or many others. The reason is that getting this stuff right cross-browser is hard. Why waste your time when others have worked and worked to get it right and make it super simple to use? I guarantee that if you spend your time learning how to use a framework you will get farther in your javascript development skill faster. Later you can come back and see how it's all done in the nitty gritty if you want to.

That said, here's script that will work cross-browser, and will do nothing if neither of these properties have a function assigned:

el = document.getElementById('id');
if (el.onclick) {
   el.onclick();
} else if (el.click) {
   el.click();
}

You could also do this, but perhaps this is a little less clear:

(el.onclick || el.click || function() {})();

Some empirical tests firing the click event on a div:

• Firefox 3 and 4 use onclick.
• IE7, 8 use both.
• Chrome uses onclick (as checked in v. 12.0.742.100).
• Safari on iPhone 4 with iOs 4.2.1 uses onclick.

Test script:

var d = document.createElement('div'); d.style.position = 'absolute'; d.style.top = '0'; d.style.left = '0'; d.style.width = '200px'; d.style.height = '200px'; d.style.backgroundColor = '#fff'; d.style.border = '1px solid black'; d.onclick = function() {alert('hello');}; document.body.appendChild(d);

Run this in developer tools in your browser, or javascript: in front and void(0); at the end then paste into the address bar and hit Enter. Then try d.click() and d.onclick(). You can click the div itself to prove it works with real clicks too.

Speiss

just found the same @ #5701593 – Parricide

@Roberkules - Whoops... I guess that makes this a duplicated question then... I did google it, but only found solutions for natively clickable elements... – Fcc

You made good points, but heads up, if the target element is clickable by default behaviour (such as a <button>), the click() will work, even in Chrome.. – Fcc

Answer 2

Use this if you actually want to trigger an event programmatically:

function eventFire(el, etype){
  if (el.fireEvent) {
   (el.fireEvent('on' + etype));
  } else {
    var evObj = document.createEvent('Events');
    evObj.initEvent(etype, true, false);
    el.dispatchEvent(evObj);
  }
}
//usage
eventFire(document.getElementById('x'),'click');

Nibbs

Answer 3

You will need to feature detect as different browsers (using non-html5 doctype) can support different dom methods:

var ele = document.getElementById('x');
if(typeof ele.click == 'function') {
  ele.click()
} else if(typeof ele.onclick == 'function') {
  ele.onclick()
}

Scrummage

I guess it should be made part of JS coding guidelines, "Detect a feature before using it". – Ace

@Ace the problem originates from inconsistent DOM APIs, not the JavaScript language itself. But yes, feature detection is a Good Thing. – Jahn

Right said Fred err..Matt. Well, I am not blaming JS. I fear JS more than I fear GOD. God may forgive you for your mistakes but badly written JS code may not. – Ace

@Ace jslint will help fix any badly written JS code! First among them using only two equal signs instead of three, and second among them missing semicolons after statements. – Speiss

@Ben I don't think it's really necessary to check for a function type, just check if the property exists. If someone stuck a non-function on one of these properties then you have bigger problems. – Speiss

I use jslint at work, have to use it, when I started using jslint, it hurt me a lot, trying to follow the best practices now :-) – Ace

@Erik agreed, I just prefer to be verbose when answering questions for the sake of OP. – Scrummage

Or just use a library like jQuery that already has 1000s of man-hours invested in making these things cross-browser. It's OK to look at this stuff academically, but don't fool yourself into thinking you are going to be writing jQuery-quality cross-browser code anytime soon in the general case. – Rollo

Answer 4

You can attach an onclick method to anything, but if you don't have any events attached to the actual element itself, it will error out, or simply do nothing.

var el = document.getElementById('x');
el.onclick = function() { //do something };
el.click();

Dromous

Answer 5

Vanilla JS (without jQuery)

/**
 * Simulate a click event.
 * @public
 * @param {Element} elem  the element to simulate a click on
 */
var simulateClick = function (elem) {
    // Create our event (with options)
    var evt = new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
        view: window
    });
    // If cancelled, don't dispatch our event
    var canceled = !elem.dispatchEvent(evt);
};

To use it, call the function, passing in the element you want to simulate the click on.

var someLink = document.querySelector('a');
simulateClick(someLink);

https://gomakethings.com/how-to-simulate-a-click-event-with-javascript/

Psychosexual

Answer 6

Try doing something like the following:

var my_div = document.getElementById('x');
my_div.onclick = function() {
   alert('hello world');
}

Mercaptide

Help me clear this, but what this is doing is essentially giving the div an onclick event... That's not what I'm looking for, as I already have a event setup, but I need to trigger it through some other user interaction... Like, on page load, this button should execute its trigger, hence running whatever animation it had in store... – Fcc

Answer 7

I've had a similar issue while trying to use the .click method on stock android browsers. Seems like substituting .click with $('selector').on('click', cb); solves the issue.

Incredulity