mootool event delay on specifed timing

Question

anyone come across a code that only fire event when the mouse enter the element for certain time ? but won't fire event if only hover or passed thru the element quickly..

score 1 · Answer 1 · answered Sep 03 '10 at 06:36

Using setTimeout, it's not the MooTools way. What you should use is the framework's methods:

var theDiv = $$('div')[0];
var foo = function(){
    theDiv.highlight();
};
var timer;

theDiv.addEvents({
    mouseenter: function() {
        timer = foo.delay(1000);
    },

    mouseleave: function() {
        $clear(timer);
    }
});

See a working example: http://www.jsfiddle.net/oskar/SZsNT/

score 0 · Answer 2 · answered Sep 02 '10 at 20:30

0

var timer = null;
element.addEvents({
  mouseenter: function() {
    timer = setTimeout(foo, 5000);
  },

  mouseleave: function() {
    clearTimeout(timer);
  }

});

So foo will be called only if cursor was over element for 5 seconds

answered Sep 02 '10 at 20:30

fantactuka

3,298
19
29

can i work around the code become like this ? but i not sure wat to replace with the foo.. this.menu.addEvents({ mouseenter: function (event) { timer = setTimeout(foo, 5000); obj.remain = []; obj.removeRemain(10) }, mouseleave: function (event) { clearTimeout(timer); obj.remain.each(function (item) { item.addClass(obj.options.remainClass) }); obj.removeRemain(obj.options.remainTime) } }); – redcoder Sep 02 '10 at 20:58
`foo` is a function you what to be called in case cursor is over the element for 5 seconds – fantactuka Sep 03 '10 at 06:31

mootool event delay on specifed timing

2 Answers2