I'm playing with stopPropagation, adapting code from an MDC doc.
Here's the question: Everything works fine if I do what they did and use element.addEVentListener("click", fname).
But, when I try to attach the function with the element's onclick attribute ( <div onclick="fname();"> ), propagation does not stop.
And if I use <div onclick="function(ev) {fname();}">, fname() isn't called at all (I also tried passing fname(ev) with the same results).
Ideas anyone? Let me know if you need to see the code.
When you do this:
<div onclick="fname();">
You're not assigning fname as the event handler, you're calling fname from within your event handler (which is an anonymous function created for you). So your first parameter is whatever you pass into fname, and in your quoted code, you're not passing anything into it.
You'd want:
<div onclick="fname(event);">
But even that won't be reliable, because it assumes that either the auto-generated anonymous function accepts the event parameter using the name event or that you're using IE or a browser that does IE-like things and you're looking at IE's global window.event property.
The more reliable thing to do is this:
<div onclick="return fname();">
...and have fname return false if it wants to both stop propagation and prevent the browser's default action.
All of this why I strongly advocate always using DOM2 methods (addEventListener, which is attachEvent — with slightly different arguments — on IE prior to IE9) to hook up handlers if you want to do anything interesting in the event (or, 9 times out of 10, even if you don't).
Off-topic: And this whole area is one of the reasons I recommend using a library like jQuery, Prototype, YUI, Closure, or any of several others to smooth over browser differences for you so you can concentrate on your own work.