Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Cancelling Event Bubbling with FireFox 3

Status
Not open for further replies.
BoulderBum

BoulderBum

Programmer
Jul 11, 2002
2,179
US
Okay, I have a mousedown event handler on a parent div, and an element within the parent which has its own mousedown event handler.

If the child event handler fires, I wasnt to cancel the parent event. In IE, this happens via:

window.event.cancelBubble = true;

...but what do I do for FireFox?
 
Sort by date Sort by votes
So what's the alternative to window.event?

Right now I have both onclick's (for the parent and child) pointed to:

function myFunction( string message )
{
alert( message );
window.event.cancelBubble = true;
}

What is the proper syntax for FireFox functionality?
 
Upvote 0 Downvote
Well, you would have the event data passed in as the first parameter. But this depends on how you are calling your function.

If you set it using script:

Code: 
someEl.onclick = function(evt, message) {
   evt = (evt) ? evt : window.event;
   alert(message);
   evt.cancelBubble = true;
}

then you should be home and dry.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
This works for IE again, not for FireFox. Any ideas?

Code: 
function doSomething(evt)
{
    evt = (evt) ? evt : window.event;
    evt.cancelBubble = true;
}

...this doesn't work either. For FireFox, evt is undefined just like in IE, but window.event.cancelBubble doesn't work:

Code: 
function doSomething(evt)
{
	if (!evt)
	    window.event.cancelBubble = true;
	else
	    evt.stopPropagation();
}
 
Upvote 0 Downvote
Aaah - this will depend on how you are assigning your event handlers. If you do it like I showed you, then it should work. If you assign it like this:

Code: 
<div onmousedown="doSomething();">

then it will probably not work.

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
[tt]
<html>
<head>
<script language="javascript">
function doSomething (obj,evt) {
alert(obj.id);
var e=(evt)?evt:window.event;
if (window.event) {
e.cancelBubble=true;
} else {
//e.preventDefault();
e.stopPropagation();
}
}
</script>
</head>
<body>
<div id="parent1" onclick="alert(this.id)" style="width:250px;background-color:yellow">
<p>This is parent1 div.</p>
<div id="child1" onclick="doSomething(this,event)" style="width:200px;background-color:eek:range">
<p>This is child1.</p>
</div>
<p>This is parent1 div.</p>
</div>
<br />
<div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:cyan;">
<p>This is parent2 div.</p>
<div id="child2" onclick="alert(this.id)" style="width:200px;background-color:lightblue;">
<p>This is child2. Will bubble.</p>
</div>
<p>This is parent2 div.</p>
</div>
</body>
</html>
[/tt]
 
Upvote 0 Downvote
Thanks, tsuji. That clued me in to the proper way to pass an "event". Is that a keyword or something, by the way? I'm not sure how this works:

Code: 
doSomething(event);

...but it does.

Can anyone explain how "event" operates in that statement?

Also, BillyRay, you were right about what you were saying before with cancelBubble. Here's what I ended up going with:

Code: 
function doSomething(evt)
{
    if (window.event)
        window.event.cancelBubble = true;
    else
        evt.cancelBubble = true;
}

...and it's working without error.
 
Upvote 0 Downvote
BoulderBum,

although you've already got it figured out, here's a webpage that explains passing events to functions:


Just remember that when a function is assigned via javascript the event element is automatically passed, and when it's called inline from an HTML element then you need to pass the keyword event.

-kaht

[small]How spicy would you like your chang sauce? Oh man... I have no idea what's goin' on right now...[/small]
[banghead]
 
Upvote 0 Downvote
Hmmm. Good stuff.

I'm actually glad you posted that link because I like to know how things work (instead of just getting the job done in the short term).
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
392
Daniel K
Daniel K
Ahmad khalafalla
  • Locked
  • Question
How to listen to 'onclick' event on the document
Replies
1
Views
302
feherke
feherke
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
358
ggriffit
ggriffit
JPSeo
  • Locked
  • Question
Another cjhild_process.exec issue with complex shell command
Replies
0
Views
216
JPSeo
JPSeo
waubain
  • Locked
  • Question
id tag not loading new data with new ajax call 1
Replies
4
Views
369
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top