Thanks TJ,
That worked perfectly.
Many thanks!
Ben
On Thu, Apr 8, 2010 at 2:41 AM, T.J. Crowder <t...@crowdersoftware.com> wrote:
Hi,
Without code it's kind of hard to tell what's going wrong, but it
*sounds* like you have handlers on both the checkbox's click event and
the row's click event, and that you're calling Event.stop from within
the checkbox's click event to (try to) prevent the row click from
firing. But of course that cancels the event, including the checking
of the checkbox.
This is one of the places where you don't want to *stop* the event,
you just want to prevent it from propagating (bubbling) up the DOM to
ancestors of the element on which it occurred. So instead of calling
#stop, call #stopPropagation[1], which does exactly that. (Prototype
nicely provides this for you on browsers that don't support it
natively.)
So that's the minimal-impact way to fix it (I think, inferring from
your question).
There's another way which may have other benefits for you, but it's a
larger change to what I infer is your current structure: Event
delegation. Rather than watching every row and every checkbox in the
table for clicks, just watch for clicks on the table, since clicks
bubble. In your table click handler, if you're only interested in
clicks on rows or checkboxes, do this:
var element;
element = event.findElement('tr, input[type=checkbox]');
if (!element) {
/* ...click wasn't in a tr or checkbox; perhaps in the table
margin... */
else if (element.tagName == 'INPUT') {
/* ...handle click on checkbox; perhaps you just ignore it...
*/
}
else {
/* ...handle click on row... */
}
Event#findElement takes a CSS selector and sees if it matches the
element on which the click actually occurred; if not, it goes and
check the element's parent element for a match, etc. The upshot is
that you get the lowest matching element (the one closest to the
actual click).
One of the big advantages of event delegation is that you can happily
add rows to the table and remove rows without worrying about handlers;
you have just the one handler on the table. That's very useful for
dynamic stuff. The cost is a small bit of extra complexity in the
actual handler.
[1]
http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-stopPropagation
HTH,
--
T.J. Crowder
Independent Software Consultant
tj / crowder software / com
www.crowdersoftware.com
On Apr 7, 11:23 pm, Benjamin <xixbenjamin...@gmail.com> wrote:
> Hello,
>
> I've got a table in which each row has an onclick to launch a pop up
> using ajax. The onclick for the row is set with in the tr tag. When I
> attempt to prevent this row onclick while toggling the check box
> within the row, it fails to toggle the check box. I'm using
> Event.stop(event) to prevent the row onclick from running when the
> check box is toggled. However, doing this appears to negate the click
> of the check box too.
>
> I need to allow the check box to be used normally, with out launching
> the row onclick and to have the rest of the row use the onclick. Any
> help / insight on this would be much appreciated.
>
> Thanks,
> Benjamin
>
> FYI: As a test, I've added an alert prior to the Event.stop(). When
> present, this alert displays the checkbox as being toggled when the
> alert is given and then changes back to the original state when the
> alert is confirmed.
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to
prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com<prototype-scriptaculous%2bunsubscr...@googlegroups.com>
.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
