SiteExperts.com Logo Home | Community | Developer's Paradise
User Groups | Site Tools | Site Information | Search
 Main Menu
 Forums
SiteExperts.com Forums
All Discussions

SiteExperts Feedback
The Lounge
Dynamic HTML
Site Design/ Critiques
HTML and CSS
XML Technologies
The Wireless Internet
Internet Explorer
Microsoft .NET
The Server
Technical Support

Sponsored Links

User Groups : Forums : SiteExperts : Dynamic HTML :

Previous DiscussionNext Discussion
 click() event for firefox

Part 1:

In my page below, I want to search out links that have a particular class name and make the parent element click on the first link inside that container.

This works in IE. In Firefox it repeatedly fires the "click" event, causing the onclick to fire infinitely. Can anyone see why?

<html>
<head>
<script type="text/javascript">
function clickableParents(vClass) {
 try {
  HTMLElement.prototype.click = function() {
   var evt = this.ownerDocument.createEvent('MouseEvents');
   evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
   this.dispatchEvent(evt);
  }
 } catch (ex) {}
 var elms = document.getElementsByTagName("A");
 for (var i=0; i<elms.length; i++) {
  if ((vClass>"") && (elms[i].className != vClass)) continue;
  elms[i].parentNode.onclick = function () {
   elm = this.childNodes[0];
   while (elm.nodeType != 1) elm = elm.nextSibling;
   elm.click(); // ensures that the onclick fires
  }
 }
}
</script>
</head>

<body onload="clickableParents('ok')">
<div style="border:1px solid red;width:300px;height:50px;text-align:center;vertical-align:center;" onclick="alert('onclick on the div');">
 <a href="
http://www.google.com/" target="google" onclick="return (confirm('Are you sure?'))" class="ok">Go to Google.com</a>
</div>
<div style="border:1px solid red;width:300px;height:50px;text-align:center;vertical-align:center;" onclick="alert('onclick on the div');">
 <a href="
http://www.yahoo.com/" target="yahoo" onclick="return (confirm('Are you sure?'))" class="ok">Go to Yahoo.com</a>
</div>
<div style="border:1px solid red;width:300px;height:50px;text-align:center;vertical-align:center;">
 <a href="
file:///doesnotexist.txt" onclick="return (confirm('Are you sure?'))">some other broken link</a>
</div>
</body>
</html>

Part 2:

Also, I'm overwriting the onclick event on the wrapper div element.

Can someone show me a better way of achieving what I'm trying to do here, because I tried doing this by attaching events to things and got significantly lost and frustrated.

Started By frumbert on Feb 5, 2007 at 11:35:17 PM

3 Response(s) | Reply

Earlier Replies | Replies 2 to 3 of 3 | Later Replies
seth_illgard on Mar 10, 2007 at 8:50:53 AM (# 2)

try this: (code in spanish, sorry)

function agregarEvento(elemento, evento, java)
{
//Probar la compatibilidad del navegador
if (elemento.addEventListener)
{
elm.addEventListener(evento.substr(2), java, false);
return true;
}
else if (elemento.attachEvent)
{
var r = elemento.attachEvent(evento, java);
return r;
}
else
{
elemento[evento] = java;
}
}

The function takes 3 params: The node (a element in your case), the name of the event like "onclick" and code like 'return confirm("bla bla?")';


Also, look here: "http://www.java2s.com/Code/JavaScript/Ajax-Layer/Mouse.htm"
Hope it helps


hok on Mar 10, 2007 at 10:04:29 AM (# 3)

hossam

HI MEDO_NET HOKHOS SAY BY BY


Earlier Replies | Replies 2 to 3 of 3 | Later Replies

To respond to a discussion, you must first logon.

If you are not registered, please register yourself to become a member of the SiteExperts.community.

User Name
Password
Copyright 1997-2004 InsideDHTML.com, LLC. All rights reserved.