click clack

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…

clickclack.png

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:

1alert1.png

click here and see only the one you want (‘checkbox’):

2alerts1.png

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

Advertisements

3 Comments

Filed under Javascript

3 responses to “click clack

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

  2. Oops, filtered my code…

    So, pretend there’s an input tag, just like your post:

    onclick=”alert(‘checkbox’);Event.stop(event);”

  3. Jim

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s