Fake "click" to activate an onclick method

JavascriptEvent Handling

Javascript Problem Overview


I have an element with an onclick method.

I would like to activate that method (or: fake a click on this element) within another function.

Is this possible?

Javascript Solutions


Solution 1 - Javascript

Once you have selected an element you can call click()

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

see: https://developer.mozilla.org/En/DOM/Element.click

I don't remember if this works on IE, but it should. I don't have a windows machine nearby.

Solution 2 - Javascript

If you're using JQuery you can do:

$('#elementid').click();

Solution 3 - Javascript

I could be misinterpreting your question, but, yes, this is possible. The way that I would go about doing it is this:

var oElement = document.getElementById('elementId');   // get a reference to your element
oElement.onclick = clickHandler; // assign its click function a function reference

function clickHandler() {
    // this function will be called whenever the element is clicked
    // and can also be called from the context of other functions
}

Now, whenever this element is clicked, the code in clickHandler will execute. Similarly, you can execute the same code by calling the function from within the context of other functions (or even assign clickHandler to handle events triggered by other elements)>

Solution 4 - Javascript

var clickEvent = new MouseEvent('click', {
  view: window,
  bubbles: true,
  cancelable: true
});
var element = document.getElementById('element-id'); 
var cancelled = !element.dispatchEvent(clickEvent);
if (cancelled) {
  // A handler called preventDefault.
  alert("cancelled");
} else {
  // None of the handlers called preventDefault.
  alert("not cancelled");
}

element.dispatchEvent is supported in all major browsers. The example above is based on an sample simulateClick() function on MDN.

Solution 5 - Javascript

If you're using jQuery, you need to use the .trigger function, so it would be something like:

element.trigger('click');

http://api.jquery.com/trigger/

Solution 6 - Javascript

Using javascript you can trigger click() and focus() like below example

document.addEventListener("click", function(e) {
  console.log("Clicked On : ",e.toElement);
},true);
document.addEventListener('focus',function(e){
  console.log("Focused On : ",e.srcElement);
},true);

document.querySelector("#button_1").click();
document.querySelector("#input_1").focus();

<input type="button" value="test-button" id="button_1">
<input type="text" value="value 1" id="input_1">
<input type="text" value="value 2" id="input_2">

Solution 7 - Javascript

This is a perfect example of where you should use a javascript library like Prototype or JQuery to abstract away the cross-browser differences.

Solution 8 - Javascript

just call "onclick"!

here's an example html:

<div id="c" onclick="alert('hello')">Click me!</div>
<div onclick="document.getElementById('c').onclick()">Fake click the previous link!</div>

Solution 9 - Javascript

For IE there is http://msdn.microsoft.com/lv-lv/library/ms536423(en-us,VS.85).aspx">fireEvent()</a> method. Don't know if that works for other browsers.

Solution 10 - Javascript

I haven't used jQuery, but IIRC, the first method mentioned doesn't trigger the onclick handler.

I'd call the associated onclick method directly, if you're not using the event details.

Solution 11 - Javascript

You can also try getting the element's onclick attribute and then passing into eval. This should work despite the big taboo over eval. I put a sample below

eval(document.getElementById('elementId').getAttribute('onclick'));

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionyoavfView Question on Stackoverflow
Solution 1 - JavascriptBenView Answer on Stackoverflow
Solution 2 - JavascriptEduardo CampañóView Answer on Stackoverflow
Solution 3 - JavascriptTomView Answer on Stackoverflow
Solution 4 - JavascriptJonathan LonowskiView Answer on Stackoverflow
Solution 5 - Javascriptrink.attendant.6View Answer on Stackoverflow
Solution 6 - JavascriptNiklesh RautView Answer on Stackoverflow
Solution 7 - JavascriptD'Arcy RittichView Answer on Stackoverflow
Solution 8 - JavascripthasenView Answer on Stackoverflow
Solution 9 - JavascriptVilx-View Answer on Stackoverflow
Solution 10 - JavascriptCan Berk GüderView Answer on Stackoverflow
Solution 11 - JavascriptcnautView Answer on Stackoverflow