Почему пользовательские события не работают для меня? (Mootools) - PullRequest
Новая
       15

Почему пользовательские события не работают для меня? (Mootools)

0 голосов
/ 25 апреля 2010

Я изучаю Mootools, но у меня возникают проблемы при запуске пользовательских событий. Я уверен, что это должно быть что-то простое, но я не вижу этого на всю жизнь.

Я написал простой класс для перемещения некоторых элементов списка с помощью Fx.Tween. Он отлично работает, за исключением того, что пользовательские события не запускаются, что бы я ни пытался. 

<script type="text/javascript">
    var Pusher = new Class({
        Implements: [Events,Options],
        options: {
            elements: []
        },

        initialize: function(options){
            this.setOptions(options);
            this.attachListeners(this.options.elements);
        },

        attachListeners: function(elements){
            $$(elements).each(function(el){
                $(el).addEvent('mouseover', this.pushIn.bind(el))
                     .addEvent('mouseout', this.pushOut.bind(el));
            }, this);
        },

        pushIn: function(){
            this.fireEvent('in');
            this.set('tween', {duration: 'short'});
            this.tween('paddingLeft', '50px');
        },

        pushOut: function(){
            this.fireEvent('out');
            this.set('tween', {duration: 'short'});
            this.tween('paddingLeft', '0px');            
        }
    });

    window.addEvent('domready', function(){
        var p = new Pusher({
            elements: $$('li')
        });
        p.addEvent('in', function(){ alert('in'); });
        p.addEvent('out', function(){ alert('out'); });
    });
</script>

И в HTML: 

<ul id="mylist">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

Я также попробовал следующее: 

window.addEvent('domready', function(){
    var p = new Pusher({
        elements: $$('li'),
        onIn: function(){ alert('in'); },
        onOut: function(){ alert('out'); }
    });
});

Что я делаю не так?

1 Ответ

2 голосов
/ 25 апреля 2010

Проблема с этой строкой: 

this.pushIn.bind(el)

Когда вызывается pushIn , это относится к элементу <li>, который был обнаружен, а не объекту Pusher Поэтому вызов this.fireEvent('in') вызовет событие для элемента <li> вместо объекта вашего класса. Объект события DOM содержит цель, которая ссылается на элемент, вызвавший событие. Используя это целевое свойство, мы можем получить элемент, который вызвал событие, а затем анимировать его.

Примечание: когда срабатывает событие указателя мыши (over | out), this уже ссылается на объект DOM, поэтому вам не нужно явно связывать его с .bind(el).

В код внесены следующие вещи:

  1. привязывает обработчики событий к объекту Pusher
  2. используйте event.target для анимации элемента <li> DOM

пример на jsf 

attachListeners: function(elements){
    $$(elements).each(function(el){
        $(el).addEvent('mouseover', this.pushIn.bind(this))
             .addEvent('mouseout', this.pushOut.bind(this))
    }, this);
},

pushIn: function(event) {
    this.fireEvent('in');
    var item = event.target;
    item.set('tween', {duration: 'short'});
    item.tween('paddingLeft', '50px');
},

pushOut: function(event){
    var item = event.target;
    this.fireEvent('out');
    item.set('tween', {duration: 'short'});
    item.tween('paddingLeft', '0px');            
}
...