/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Force Click In Javascript…Cross Browser

All,

I am trying to force a click programatically of an <a href=””> tag. I am able to get it to work in IE 7, but not in FireFox. I first attempted the document.getElementById(elementid).click(); and that worked in IE7. I then found the following routine with the hopes of getting it to work in FireFox.

function clickElement(elementid)
{
var e = document.getElementById(elementid);
if (typeof e == ‘object’)
{
alert( “type object” );
if(document.createEventObject)
{
alert(‘createEventObject’);
e.fireEvent(‘onclick’);
return false;
}
else if(document.createEvent)
{
alert(‘createEvent’);
var evObj = document.createEvent(‘MouseEvents’);
evObj.initEvent(‘click’,true,true);
e.dispatchEvent(evObj);
return false;
}
else
{
alert(‘click’);
e.click();
return false;
}
}
else
alert( “not type object” );
}

Does anyone know how I trigger a click event for an <a href tag in FireFox?

Any help is appreciated
Jack

to post a comment
JavaScript

14 Comments(s)

Copy linkTweet thisAlerts:
@FangJun 29.2008 — It won't fire a default event, you have to have an onclick:&lt;a href="foobar.htm" onclick="location=this.href" id="blah"&gt;foobar&lt;/a&gt;
Copy linkTweet thisAlerts:
@jhough76authorJun 29.2008 — Fang,

Thanks for the response. I tride using the onclick="location=this.href" and it does not seem to work in FireFox. Worse yet is that it changes the behavior in IE. I am calling a thickbox ajax window which opens on top of the current page. When I change the onclick as suggested, it opens the thickbox in its own window and not as a modal box above the current page.

Are there any other ideas?

-Jack-
Copy linkTweet thisAlerts:
@FangJun 29.2008 — What does the generated anchor look like?
Copy linkTweet thisAlerts:
@jhough76authorJun 29.2008 — Here is the anchor:

<a href="/ajax_window_splash.jsp?height=450&width=550&modal=true" class="thickbox" name="splash" title="Welcome"></a>

I am using thickbox which uses jquery.

Thanks again

Jack
Copy linkTweet thisAlerts:
@FangJun 29.2008 — Try [I]onclick="location=this.href; return false;"[/I]
Copy linkTweet thisAlerts:
@jhough76authorJun 29.2008 — Still no luck. This simply opens up the thickbox in the same window in IE and it still does not work in Firefox. Is there a reason FireFox will not handle the default location. My concern is that I cannot even get the click to work on Firefox with the addition of the onclick="location=this.href" which also breaks IE. What is the behavior with forced clciks in FireFox?

-Jack-
Copy linkTweet thisAlerts:
@FangJun 29.2008 — thickbox is overwriting the onclick handler.

Try with this function, without adding the onclick:function clickElement(elementid)
{
var target=document.getElementById(elementid);
if(document.dispatchEvent) { // W3C
var oEvent = document.createEvent( "MouseEvents" );
oEvent.initMouseEvent("click", true, true,window, 1, 1, 1, 1, 1, false, false, false, false, 0, target);
target.dispatchEvent( oEvent );
}
else if(document.fireEvent) { // IE
target.fireEvent("onclick");
} <br/>
}
Copy linkTweet thisAlerts:
@jhough76authorJun 29.2008 — Fang,

Thanks, I appreciate the effort.

I tried the function you supplied. I added an alert inside the if statement: if(document.dispatchEvent) and the alert fired when browsing the page with FireFox and not when browsing with IE. However, it does not appear that the click event was triggered. Also, I do not see any javascript errors. The function does work on IE.

I think I might remove thickbox from the picture and get the click functionality to work.

Any help is appreciated

Jack
Copy linkTweet thisAlerts:
@calvin_nrJul 09.2008 — Fang,

Thanks, I appreciate the effort.

I tried the function you supplied. I added an alert inside the if statement: if(document.dispatchEvent) and the alert fired when browsing the page with FireFox and not when browsing with IE. However, it does not appear that the click event was triggered. Also, I do not see any javascript errors. The function does work on IE.

I think I might remove thickbox from the picture and get the click functionality to work.

Any help is appreciated

Jack[/QUOTE]


jhough...I am facing the same problem and am unable to fire this event. Did you find any solution?

Did any of u solve this...or can atleast give me a small sample html page which does this in firefox. Thanks.
Copy linkTweet thisAlerts:
@jhough76authorJul 09.2008 — calvin,

No, I have not. My next step was to remove thickbox from the equation...I have not had the time yet. Are you using thickbox or are you forcing a click of some other link? I have the site live right now and when you look at it from FF, I alert the dispatch event was hit and then nothing happens. It works on IE. You can check it out at https:www.notbaggage.com

I will try to get to removing thickbox some time thsi week and post an update.

Jack
Copy linkTweet thisAlerts:
@calvin_nrJul 09.2008 — I saw that it works when we try to simulate the clicking of say a check box but not for input type = "file"...Its a pity its unavailable in Mozilla and other browsers but only in IE
Copy linkTweet thisAlerts:
@jhough76authorJul 09.2008 — calvin,

My understanding is that it is supposed to work in other browsers including FF. If anyone can confirm/deny that we should be able to force clicks in FF, it will be appreciated. In my research, I did see that there were some discussions about it being disabled because people were using it to increase CPC revenues, but nothing in a standard, it was just a discussion.

-Jack-
Copy linkTweet thisAlerts:
@FangJul 10.2008 — [I]dispatchEvent[/I] works in Fx for all elements except input type="file"

All other elements can be fired if they have an event added. This includes anchor. It is not the default event, href, that is fired, but the added event i.e. onclick.&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;fireEvent dispatchEvent&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;

&lt;script type="text/javascript"&gt;
function fireElement(objID) {
var target=document.getElementById(objID);
if(document.dispatchEvent) { // W3C
var oEvent = document.createEvent( "MouseEvents" );
oEvent.initMouseEvent("click", true, true,window, 1, 1, 1, 1, 1, false, false, false, false, 0, target);
target.dispatchEvent( oEvent );
}
else if(document.fireEvent) { // IE
target.fireEvent("onclick");
} <br/>
}
&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;
&lt;a id="foobar" onclick="location.href=this.href;" href="foobar.htm"&gt;foobar&lt;/a&gt;
&lt;button type="button" onclick="fireElement('foobar');"&gt;fire anchor&lt;/button&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@jhough76authorJul 12.2008 — Fang,

Thanks for the reply. Thickbox does not work when triigered through an onClick (or at least it did not work for me). I actually found a function called tb_show which I was able to call from javascript and avoid the force click logic. It now works on most browsers (SlimBrowser, Flock, Opera, FF, IE 7, IE 6, AOL) with Safari being the exception.

Thanks again for your help

Jack
×

Success!

Help @jhough76 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.1,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...