onClick for table a row, but not to its links!

[Siah]

Hi,

I have table with many rows indicating my record. I want my rows to
load my record, so I attached an onClick event to every row that loads
the proper record. Now, there are options associated to every record
(delete link, select checkbox, etc) that don't result in loading the
record. The problem should be obvious, upon the user clicking on any of
those options, the row's onclick is triggered which is undesirable
behaviour.

Any ideas how I would address this problem,

Regards,
Sia

[RobG]

Siah said on 2006-Mar-13:

Hi,

I have table with many rows indicating my record. I want my rows to
load my record, so I attached an onClick event to every row that loads
the proper record. Now, there are options associated to every record
(delete link, select checkbox, etc) that don't result in loading the
record. The problem should be obvious, upon the user clicking on any of
those options, the row's onclick is triggered which is undesirable
behaviour.

Any ideas how I would address this problem,

I suppose you have onclick events on both the table cells and the rows.
In that case, you need to stop clicks on the cells from bubbling up to
the rows.

Read about events:

<URL:http://www.quirksmode.org/js/introevents.html>
There is quite a bit to read, but it is all good and very necessary to
understand what it going on. You are looking for stopPropagation and
cancelBubble (you need to do both or bubbling will still happen in some
browsers) which is in the section on event order:

<URL:http://www.quirksmode.org/js/events_order.html>
But note that if you cancel bubbling for click events on the cells, how
will anything bubble up to the row? :-)
--
Rob

[Manifest Interactive]

Siah wrote:

Hi,

I have table with many rows indicating my record. I want my rows to
load my record, so I attached an onClick event to every row that loads
the proper record. Now, there are options associated to every record
(delete link, select checkbox, etc) that don't result in loading the
record. The problem should be obvious, upon the user clicking on any of
those options, the row's onclick is triggered which is undesirable
behaviour.

Any ideas how I would address this problem,

Regards,
Sia

Greetings,

One solution I have used for this problem is to place an image (Down
Arrow) inside a division at the right of each row. That image has the
onClick function. That function also changes the inner HTML of the
division to swap the Down Arrow image with an Up Arrow and also changes
the onClick function that is called.

This keeps the records from acting as elements of the row that wraps
them.

I can give you some code samples if you need. But this works really
well for me plus it gives your users a visual indication that the row
is expandable.

Hope this helps,
- Peter Schmalfeldt

[Siah]

Thanks for the help. I'll try it out before asking for sample code. I
think I can do it.

Thanks,
Sia