Trigger A Button Click From A Non-button Element

August 21, 2024 Post a Comment

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: doc

Solution 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();
} elseif (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.

Solution 2:

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

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

Solution 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()
} elseif(typeof ele.onclick == 'function') {
  ele.onclick()
}

Solution 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();

Solution 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 = newMouseEvent('click', {
        bubbles: true,
        cancelable: true,
        view: window
    });
    // If cancelled, don't dispatch our eventvar 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/

Html5 Lite