Cross-browser alternative to click() event

  • Thread starter Jesper Rønn-Jensen
  • Start date
J

Jesper Rønn-Jensen

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
 
A

Adambrz

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!
 
A

AlexVN

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 to expand...

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
 
J

Jesper Rønn-Jensen

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
 
J

Jesper Rønn-Jensen

Alexander said:
click() is supported by FireFox. http://developer.mozilla.org/en/docs/DOM:element.click
Click to expand...

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 <div> element 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-HTML/html.html#ID-2651361)

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

VK

Click() in Firefox is new to me, so obviously there must be something
else bugging.
Click to expand...

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.
 
V

VK

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 <div> element is not an input element.
Click to expand...

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.
 
S

seba.gatoloco

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/DOM:element.dispatchEvent
http://developer.mozilla.org/en/docs/DOM:event.initMouseEvent

Bye
Sebastian
www.sebastian.it
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Browser cross compatible javascript 2
Cross browser mouse wheel event handler 1
Annoying Cross-browser Issue 10
Cross Browser image transitions 1
Capture browser refresh using OnBeforeUnload event 7
click event - mouse or keypress 1
style.display cross browser problem 1
Cross Browser JavaScript Debugging (Moz/IE) (continued...) 0

Members online

No members online now.
Total: 34 (members: 1, guests: 33)
Robots: 369

Forum statistics

Threads
473,997
Messages
2,570,239
Members
46,827
Latest member
DMUK_Beginner

Latest Threads

Top