0

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'); }
    });
});

私は何を間違っていますか？

4

1 に答える 1

2

問題は次の行にあります。

this.pushIn.bind(el)

pushInが呼び出されると、これはホバーされた要素を参照し、 Pusherのオブジェクトではありません。したがって、呼び出しは、クラスのオブジェクトではなく、要素でイベントを発生させます。DOM イベント オブジェクトには、イベントをトリガーした要素を参照するターゲットが含まれています。このターゲット プロパティを使用して、イベントをトリガーした要素を取得し、アニメーション化できます。<li>this.fireEvent('in')<li>

補足: mouse(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');            
}
于 2010-04-25T17:55:23.200 に答える