🚀 go-pugleaf

On 9 Paź, 11:26, alianora <alian...@go2.pl> wrote:
> Witam,
>
> Mam taki element na stronie:
> <div id="F227" class="drop_img">
>         <div id="ed_F227" class="drop_menu"></div>
>         <div id="edb_F227" class="drop_edb"/></div>
> </div>
>
> i potem taki kod JS (fragment):
>
> observeImgDrop : function(elem) {
>    $('F227').observe('mouseover',this.dropImgMouseOver.bind(this));
>    $('F227').observe('mouseout', this.dropImgMouseOut.bind(this));
>    return true;
>
> },
>
> dropImgMouseOver : function(e) {
>    Event.stop(e);
>    Event.element(e).className = 'drop_img_hover';
>    return true;
>
> },
>
> dropImgMouseOut : function(e) {
>    Event.stop(e);
>    Event.element(e).className = 'drop_img';
>    return true;
>
> },
>
> Pierwszy problem w tym, że Event.element(e) zwraca wewnętrznego DIVa.
> Niby obszedłem to czymś takim:
>
> var id = Event.element(e).id.split('_');
> id = id[id.length-1];
> $(id).className = 'drop_img_hover';
>
> (wiem, mało eleganckie) ale pojawia się drugi problem: przesuwając
> kursor myszy między wewnętrznymi DIVami powoduje generowanie zdarzeń
> mouseout i mouseover co powoduje denerwujące migotanie.
>
> Jak to zrobić dobrze? Gdzie tkwi mój błąd?
> Proszę o w miarę łopatologiczne wyjaśnienie bo nie jestem ekspertem od JS...

Nie uzywaj w tym miejscu bind, tylko:

observeImgDrop : function(elem) {
   $('F227').observe('mouseover',this.dropImgMouseOver);
   $('F227').observe('mouseout', this.dropImgMouseOut);
    return true;

},

wtedy wewntarz tej metody, this zawsze odnosi sie do elementu, na
ktorym jest zarejestrowane zdarzenie

dropImgMouseOver : function(e) {
   e.stop();
   //to powinno zalatwic migotanie
  if (!this.hasClassName('drop_img_hover')) {
     this.addClassName('drop_img_hover');
  }
},

pozdrawiam
keemor.com

keemor pisze:
> On 9 Paź, 11:26, alianora <alian...@go2.pl> wrote:
> Nie uzywaj w tym miejscu bind, tylko:
> 
> observeImgDrop : function(elem) {
>    $('F227').observe('mouseover',this.dropImgMouseOver);
>    $('F227').observe('mouseout', this.dropImgMouseOut);
>     return true;
> 
> },
W tym konkretnym przypadku mogę tak zrobić bo wewnątrz funkcji 
obsługujących hovera nie muszę używać zmiennych czy funkcji z klasy.
Gdyby tak było miałbym problem.

> 
> wtedy wewntarz tej metody, this zawsze odnosi sie do elementu, na
> ktorym jest zarejestrowane zdarzenie
> 
> dropImgMouseOver : function(e) {
>    e.stop();
>    //to powinno zalatwic migotanie
>   if (!this.hasClassName('drop_img_hover')) {
>      this.addClassName('drop_img_hover');
>   }
> },

Dzięki za to. Pozostał drugi problem - podwójne generowanie zdarzenia w 
momencie przesuwania kursora pomiędzy wewnętrznymi DIVami :(

Pozdrawiam,
MK

On 9 Paź, 13:25, alianora <alian...@go2.pl> wrote:
> keemor pisze:> On 9 Pa , 11:26, alianora <alian...@go2.pl> wrote:
> > Nie uzywaj w tym miejscu bind, tylko:
>
> > observeImgDrop : function(elem) {
> >    $('F227').observe('mouseover',this.dropImgMouseOver);
> >    $('F227').observe('mouseout', this.dropImgMouseOut);
> >     return true;
>
> > },
>
> W tym konkretnym przypadku mog tak zrobi bo wewn trz funkcji
> obs uguj cych hovera nie musz u ywa zmiennych czy funkcji z klasy.
> Gdyby tak by o mia bym problem.
Wtedy z  pomocą przychodzi:
http://api.prototypejs.org/dom/event.html#findelement-class_method
var div = e.findelement('#F227')
>
>
>
> > wtedy wewntarz tej metody, this zawsze odnosi sie do elementu, na
> > ktorym jest zarejestrowane zdarzenie
>
> > dropImgMouseOver : function(e) {
> >    e.stop();
> >    //to powinno zalatwic migotanie
> >   if (!this.hasClassName('drop_img_hover')) {
> >      this.addClassName('drop_img_hover');
> >   }
> > },
>
> Dzi ki za to. Pozosta drugi problem - podw jne generowanie zdarzenia w
> momencie przesuwania kursora pomi dzy wewn trznymi DIVami :(

Zrob przyklad tutaj: http://jsbin.com

>
> Pozdrawiam,
> MK

keemor.com

alianora pisze:
>> dropImgMouseOver : function(e) {
>>    e.stop();
>>    //to powinno zalatwic migotanie
>>   if (!this.hasClassName('drop_img_hover')) {
>>      this.addClassName('drop_img_hover');
>>   }
>> },
> 
> Dzięki za to. Pozostał drugi problem - podwójne generowanie zdarzenia w 
> momencie przesuwania kursora pomiędzy wewnętrznymi DIVami :(

A już nie miga :D

zamiast this.className ='klasa' użyłem addClassName() i 
removeClassName() i jest już tak, jak chciałem.
Wielkie dzięki!

Pozdr,
MK

keemor pisze:
> On 9 Paź, 13:25, alianora <alian...@go2.pl> wrote:
>> keemor pisze:> On 9 Pa , 11:26, alianora <alian...@go2.pl> wrote:
>>> Nie uzywaj w tym miejscu bind, tylko:
>>> observeImgDrop : function(elem) {
>>>    $('F227').observe('mouseover',this.dropImgMouseOver);
>>>    $('F227').observe('mouseout', this.dropImgMouseOut);
>>>     return true;
>>> },
>> W tym konkretnym przypadku mog tak zrobi bo wewn trz funkcji
>> obs uguj cych hovera nie musz u ywa zmiennych czy funkcji z klasy.
>> Gdyby tak by o mia bym problem.
> Wtedy z  pomocą przychodzi:
> http://api.prototypejs.org/dom/event.html#findelement-class_method
> var div = e.findelement('#F227')
A co jak nie znam ID bo mam na stronie kilka takich zagnieżdżonych 
bloków? W tym przykładzie mogę sobie ID wyznaczyć bo powtarza się 
wspólny element ale nie zawsze tak będzie.

Pozdr,
MK

On 9 Paź, 13:44, alianora <alian...@go2.pl> wrote:
> keemor pisze:> On 9 Paź, 13:25, alianora <alian...@go2.pl> wrote:
> >> keemor pisze:> On 9 Pa , 11:26, alianora <alian...@go2.pl> wrote:
> >>> Nie uzywaj w tym miejscu bind, tylko:
> >>> observeImgDrop : function(elem) {
> >>>    $('F227').observe('mouseover',this.dropImgMouseOver);
> >>>    $('F227').observe('mouseout', this.dropImgMouseOut);
> >>>     return true;
> >>> },
> >> W tym konkretnym przypadku mog tak zrobi bo wewn trz funkcji
> >> obs uguj cych hovera nie musz u ywa zmiennych czy funkcji z klasy.
> >> Gdyby tak by o mia bym problem.
> > Wtedy z  pomocą przychodzi:
> >http://api.prototypejs.org/dom/event.html#findelement-class_method
> > var div = e.findelement('#F227')
>
> A co jak nie znam ID bo mam na stronie kilka takich zagnieżdżonych
> bloków? W tym przykładzie mogę sobie ID wyznaczyć bo powtarza się
> wspólny element ale nie zawsze tak będzie.
>
> Pozdr,
> MK

Ja to robie tak:

var Test = {
init: function() {
$$('.class').invoke('observe','click',this.click);
}
click: function(e){
e.stop();
//this to klikniety element
this.addClassName('foo');
Test.other();
},
other: function(){
//tu this odnosi sie do Test
}
}
document.observe('dom:loaded', Test.init.bind(Test));

Wiecej o bind
http://keemor.com/2009/05/25/javascript-this-bind/
http://keemor.com/2009/06/01/javascript-this-bindaseventlistener/