Ran into an interesting issue today that I’m surprised I haven’t hit before. A list contains many entries, each displaying some high level data about what lies beneath. A click anywhere on the entry should take you to a more detailed view…
The trick comes with the whole “click anywhere on the entry” bit. In reality, we only want that to be “mostly true” – in this case clicking on the checkbox or PDF icon (in the upper right) should lead to different actions.
Anyway, the bit that was new to me was stopping a click on the checkbox (for example) from also taking you to the detail page (since it is afterall, a click “anywhere on the entry”).
click the checkbox here and receive two alerts:
click here and see only the one you want (‘checkbox’):
… and if it doesn’t work. Make sure you know how to spell “propagation” (not that that happened to anyone I know).
some more here
Update 10/27/08: Another helpful link on event handling.



Unfortunately stopPropogation doesn’t work in IE. But, I did notice that you’re a Rails developer (and word on the street is that your a damn good one too), and Prototype has a handy method that works well in most browsers. In your example, you could do:
This assumes you’ve included prototype.js.
Oops, filtered my code…
So, pretend there’s an input tag, just like your post:
onclick=”alert(‘checkbox’);Event.stop(event);”
Aw schucks, thanks.
Thanks for the tip – I’ll definitely start using it instead of having js errors hanging out in IE!
…and I noticed you said stopProp*o*gation. You’re not going to use the function anyway but make sure you don’t fall into the same spelling trap I did! 😉