469,336 Members | 6,145 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,336 developers. It's quick & easy.

Cross-browser alternative to click() event

Hi. I just ran into a situation where I want to emulate the IE
specific obj.click() syntax on an object on the webpage.

The most convenient thing for me is if I were able to just select my
object

document.getElementById('myobj').click()

Do you know any cross-browser solutions to that? (must work in firefox
as a minimum).

Thanks

/Jesper Rønn-Jensen

Jan 30 '07 #1
7 8838
This may not be the best answer but see if you can get something along
these lines to work.I used it for drag and drop.

js script:
function mouseOver(ev){
ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(!target) return;

if(target.id == 'DRAG'){
target.onmousedown = function(ev){
dragObject = this;
mouseOffset = getMouseOffset(this, ev);
return false;
}
}
}

function mouseDown(ev){
ev = ev || window.event;
var target = ev.target || ev.srcElement;

//code you want to execute.
}

document.onmouseover = mouseOver;
document.onmousedown = mouseDown;
//end script

html code:
<html>
<script src="js"></script>
<body>
<div id='drag'></div>
</body>
</html>

Let me know if that helps you!

Jan 30 '07 #2
On Jan 30, 4:57 pm, "Jesper Rønn-Jensen" <jespe...@gmail.comwrote:
Hi. I just ran into a situation where I want to emulate the IE
specific obj.click() syntax on an object on the webpage.

The most convenient thing for me is if I were able to just select my
object

document.getElementById('myobj').click()

Do you know any cross-browser solutions to that? (must work in firefox
as a minimum).

Thanks

/Jesper Rønn-Jensen
click() is supported by FireFox.
http://developer.mozilla.org/en/docs/DOM:element.click
This example works well:

<div id="myobj" onclick="alert('Clicked!');">Click me</div>
<script>
document.getElementById('myobj').click();
</script>

Maybe you just need a cross-browser event binding method? Try Event
object from http://www.prototypejs.org.

Sincerely,
Alexander
http://www.alexatnet.com - PHP/Ajax notes, tips, tutorials
Jan 30 '07 #3
Adambrz, Alexander

Thanks for the tips. I'll look into it and see if that can help my
situation when I get back to work. I really appreciate your thoughts.
Click() in Firefox is new to me, so obviously there must be something
else bugging.

/Jesper

Feb 2 '07 #4
Alexander wrote:
click() is supported by FireFox. http://developer.mozilla.org/en/docs/DOM:element.click
Well, it turns out the page you're linking to explains that only
certain input elements will respond to click() in Gecko (firefox,
mozilla, etc.).

That explains why I can't get your example to work in firefox --
because the <divelement is not an input element.

According to the W3C DOM level 2 spec (that the link you provided
links to), this is how the browser should work:
click
Simulate a mouse-click. For INPUT elements whose type attribute
has one of the following values: "button", "checkbox", "radio",
"reset", or "submit".
(from http://www.w3.org/TR/DOM-Level-2-HTM...tml#ID-2651361)

Which means that IE is too generous in it's support according to the
spec.

Feb 2 '07 #5
VK
On Feb 3, 1:30 am, "Jesper Rønn-Jensen" <jespe...@gmail.comwrote:
Click() in Firefox is new to me, so obviously there must be something
else bugging.
click() is DOM 0 method (Netscape 2.0) so any normal browser - and any
browser pretending to be such - supports it in general. The problem is
the that applicability of this method was narrowed over the past years
as part of user interface protection. In the particular on different
browsers click() may be silently ignored for form upload control,
select control options and links. Overall currently you may relay on
click() only for form controls _except_ file upload control and select
control.
Custom events as suggested in other post do not change anything in the
security limitations: wherever click() is not allowed, custom events
will not work either.

The fact that you are happy with IE but asking about Firefox suggests
that your [object] is in fact hidden file upload control you are
triggering by click(). If I'm right then sorry but this bird won't
fly: on Gecko browsers it is a part of user interface protection.
Feb 2 '07 #6
VK
On Feb 3, 1:42 am, "Jesper Rønn-Jensen" <jespe...@gmail.comwrote:
Well, it turns out the page you're linking to explains that only
certain input elements will respond to click() in Gecko (firefox,
mozilla, etc.).

That explains why I can't get your example to work in firefox --
because the <divelement is not an input element.
Oh, so you need it for DIV? Sorry then to everyone, createEventObjec/
fireEvent (IE) + createEvent/dispatchEvent (Gecko) will work.
Be aware that artificial event are not propagated (do not "bubble
up"). It may be important or not for your case, but just to mention.

Feb 2 '07 #7
Mmm same problem here..
Here's my solution.
Note that this function would need more appropriate error handling
etc..
currently tested on firefox 2 and IE 6

---------------------8<----------------------------------

function doClick(obj) {
try {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,0, 0, 0, 0, 0,
false, false, false, false, 0, null);
var canceled = !obj.dispatchEvent(evt);
if(canceled) {
// A handler called preventDefault
} else {
// None of the handlers called preventDefault
}
} catch(er) {
obj.click(); //IE
}
}

-------------------->8----------------------------------

just call this function like this:
doClick(document.getElementById(OBJECT_ID));

Check this out for more info:
http://developer.mozilla.org/en/docs....dispatchEvent
http://developer.mozilla.org/en/docs...initMouseEvent

Bye
Sebastian
www.sebastian.it

Feb 17 '07 #8

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Sidorf | last post: by
10 posts views Thread by Daniel | last post: by
4 posts views Thread by Paul Cheetham | last post: by
6 posts views Thread by AliR \(VC++ MVP\) | last post: by
reply views Thread by zhoujie | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.