self-or-ancestor in one whack?

0 views
Skip to first unread message

Walter Lee Davis

unread,
Dec 18, 2009, 12:51:26 PM12/18/09
to prototype-s...@googlegroups.com
I use this construction quite a lot:

var elm = evt.element();
if(elm.tagName.toString().toLowerCase() != 'td') elm = elm.up('td');

whenever I am constructing a rollover listener, since it works around
the whole issue with mouseover / out events firing whenever you move
over a child of the element you're trying to observe. Is there a
simpler way to do this, a more Prototype-y way, that is? I've had a
look around the API, and I also had a Google, but the former didn't
turn up anything useful and the latter turned up every commit message
from every project that includes Prototype.

Thanks in advance,

Walter

ColinFine

unread,
Dec 19, 2009, 9:23:55 AM12/19/09
to Prototype & script.aculo.us

I belive that is what Element.findElement is for.

Colin

Walter Lee Davis

unread,
Dec 19, 2009, 9:38:32 AM12/19/09
to prototype-s...@googlegroups.com
I'll give that a try. I'm not sure (from the API docs) if that's going
to do exactly what I want or not.

Thanks,

Walter

> --
>
> 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-s...@googlegroups.com
> .
> To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com
> .
> For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en
> .
>
>

Tobie Langel

unread,
Dec 19, 2009, 7:00:00 PM12/19/09
to Prototype & script.aculo.us

var elm = evt.findElement('td');

is exactly the same as doing:

var elm = evt.element();
if(elm.tagName.toString().toLowerCase() != 'td') elm = elm.up
('td');

Only it'll accept any kind of CSS selector.

Matt Foster

unread,
Dec 22, 2009, 12:41:23 PM12/22/09
to Prototype & script.aculo.us
You could use a closure to ensure you're dealing with the right
element.

$$('.my_table td').each(function(cell){

cell.observe('mouseover', listener.curry(cell));

});

function listener(cell, evt){
if(evt.element() != cell)
return false;
}

Are you trying to have a clean way to avoid flickering?


--

http://positionabsolute.net

Walter Lee Davis

unread,
Dec 22, 2009, 1:00:08 PM12/22/09
to prototype-s...@googlegroups.com

On Dec 22, 2009, at 12:41 PM, Matt Foster wrote:

> You could use a closure to ensure you're dealing with the right
> element.
>
> $$('.my_table td').each(function(cell){
>
> cell.observe('mouseover', listener.curry(cell));
>
> });
>
> function listener(cell, evt){
> if(evt.element() != cell)
> return false;
> }
>
> Are you trying to have a clean way to avoid flickering?
>

Sort of, really just trying to make sure that mouseover events
triggered by child elements are "credited" to the parent. I tried
Tobie's technique, and it works perfectly. My long-hand method worked
fine as well -- no flickering I could discern -- so it's really just a
coding elegance refinement I was going for rather than anything else.
I am using event delegation -- observing the entire table once rather
than each cell -- so maybe that's why I wasn't seeing any flicker.

Walter

Reply all
Reply to author
Forward
0 new messages