Javascript click function

Question

I've got some code which works fine in IE but unfortunately not in Google Chrome/Firefox.

It relies upon calling a click() event on a button from javascript. Reading around it seems that this is an IE specific extension (doh). Is there any way I can do a similar thing in chrome + firefox? To clarify, it's executing the click event on a specific button, not handling what happens when the user clicks on a button.

Thanks

The code for those who asked for it:

function getLinkButton(actionsDiv)
{
    var hrefs = actionsDiv.getElementsByTagName("a");
    for (var i=0; i<hrefs.length; i++)
    {
        var id = hrefs[i].id;
        if (id !=null && id.endsWith("ShowSimilarLinkButton"))
        {
            return hrefs[i];
        }
    }
    return null;
}

function doStuff()
{
  //find the specific actions div... not important code...
  var actionsDiv = getActionsDiv(); 
  var linkButton = getLinkButton(actionsDiv);

  if (linkButton != null)
  {
    if (linkButton.click)
    {
        linkButton.click();
    }
    else
    {
        alert("Cannot click");
    }
  }
}

I don't really want to use jQuery unless absolutely necessary

please show the code, because `click` event works on chrome,firefox,.. — N 1.1, Mar 18 '10 at 11:20
@nvl: I think he's wanting to dispatch the "click" event handler set on the button. — Andy E, Mar 18 '10 at 11:33

Andy E · Accepted Answer · 2010-03-18T12:51:53.667

2

I think you're looking for element.dispatchEvent:

function simulateClick() {
  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("click", true, true, window,
    0, 0, 0, 0, 0, false, false, false, false, 0, null);
  var cb = document.getElementById("checkbox"); 
  var canceled = !cb.dispatchEvent(evt);
  if(canceled) {
    // A handler called preventDefault
    alert("canceled");
  } else {
    // None of the handlers called preventDefault
    alert("not canceled");
  }
}

I read your question as "I'm trying to fire the onclick event for my button", whereas everyone else seems to have read it as "I'm trying to handle an onclick event for my button". Please let me know if I've got this wrong.

Modifying your code, a proper x-browser implementation might be:

if (linkButton != null) 
{ 
  if (linkButton.fireEvent) 
    linkButton.fireEvent("onclick"); 
  else 
  { 
    var evt = document.createEvent("MouseEvents");
    evt.initMouseEvent("click", true, true, window,
                               0, 0, 0, 0, 0, false, false, false, false, 0, null);
    linkButton.dispatchEvent(evt);
  } 
}

edited Mar 18 '10 at 12:51

answered Mar 18 '10 at 11:24

Andy E

338,112
86
474
445

function clickButton(element) { if (element.click) { element.click(); } else if ("fireEvent" in element) { element.fireEvent("onclick"); } else { var evt = document.createEvent("MouseEvents"); evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); element.dispatchEvent(evt); } } This is the function i've got thanks to your code, doesn't work on Firefox however but does work on chrome now... – Gordon Thompson Mar 18 '10 at 11:59
@Gordon: `fireEvent` works in IE too, so you can do away with the `click()`. I left a reference to `element` in the code that I meant to change to `linkButton` - `element.dispatchEvent(evt);` should be `linkButton.dispatchEvent(evt);` – Andy E Mar 18 '10 at 12:52
ah, found out why this code wasn't working in Firefox http://devtoolshed.com/content/fix-firefox-click-event-issue Firefox does not support the javascript click() event on a hyperlink (rendered by a LinkButton). The solution was to make it into a Button. – Gordon Thompson Mar 18 '10 at 14:33

score 1 · Answer 2 · edited May 23 '17 at 12:01

1

onclick attribute should be crossbrowser:

<input type="button" onclick="something()" value="" />

EDIT

And there was this question that seems to be about the same problem: setAttribute, onClick and cross browser compatibility

edited May 23 '17 at 12:01

Community

1
1

answered Mar 18 '10 at 11:20

OverLex

2,501
1
24
27

score 0 · Answer 3 · answered Mar 18 '10 at 11:21

0

onclick="methodcall();" works for me fine...

answered Mar 18 '10 at 11:21

Brian Mains

50,520
35
148
257

score 0 · Answer 4 · answered Mar 18 '10 at 11:22

0

you can use onClick attribute or if you need more functionality have a look at jQuery and events it offers: http://api.jquery.com/category/events/

answered Mar 18 '10 at 11:22

Kasia Gogolek

3,374
4
33
50

Javascript click function

4 Answers4

Linked

Related