mootools - mooTools 绑定所有类

Question

我不习惯使用 mooTools，它看起来很像 Prototype JS。谁能告诉我如何将它绑定到每个班级？

// This grabs all the classes
var mousy = $$('.hf-item-images');

// I don't think this is correct to apply this scroller to all the above classes
var scroll = new Scroller(mousy, {area: 100, velocity: 1});

// Mousemove
mousy.addEvent('mouseover', scroll.start.bind(scroll));
mousy.addEvent('mouseout', scroll.stop.bind(scroll));

Answer 1

您需要对此更加聪明，循环遍历 nnnn 项以制作 scollers 可能会很昂贵。在每个事件上附加一对事件也是如此。

给定标记，如下所示：

<div id="container">
    <div class="hf-item-images">...</div>
    <div class="hf-item-images">...</div>
</div>

您可以将东西委托给父级，并且只在需要它的元素上实例化一个滚动器实例，然后再重用它。

var container = document.id('container'),
    settings = {
        area: 100,
        velocity: 1
    };

container.addEvents({
    'mouseover:relay(.hf-item-images)': function(e, el){
        var scroll = el.retrieve('scroller');
        if (!scroll){
            // create instance the first mouseenter and store for later
            scroll = new Scroller(el, settings);
            el.store('scroller', scroll);
        }
        scroll.start();
    },
    'mouseout:relay(.hf-item-images)': function(e, el){
        el.retrieve('scroller').stop();
    }
});