Question

What I need is this:

If the user hover the element for more then 1 second, the event will happen, otherwise it should not.

I tried using the setTimeout() but it just delays the event and does not cancel it when the mouse leaves the element.

Are there any other ways to solve this problem?

$(".optionCont").live('mouseover', function(e){
    var $this = $(this);
    setTimeout(function(){
        $(".dropMenuCont").stop(true,true).slideUp(200);
        if($this.next().css("display") == "none"){
            $this.next().stop(true,true).slideDown(200);
        }else{
            $this.next().stop(true,true).slideUp(200);
        }
            e.preventDefault();
            e.stopPropagation();
            return false;

    }, 1000);
});

Answer 1

You could listen to the mouseenter and mouseleave events and clear the timer in the mouseleave event handler:

$(".optionCont").live('mouseenter', function(e){
     var $this = $(this);
     var timer = setTimeout(function(){
          //...
     }, 1000);
     $this.data('timer', timer);
}).live('mouseleave', function(e) {
     clearTimeout($(this).data('timer'));
});

Update:

Btw. these lines in the setTimeout callback

e.preventDefault();
e.stopPropagation();
return false;

won’t have any effect, as by the time the callback is executed, the event already bubbled up and triggered the default action (not to mention that return false from the callback does not mean anything). You have to put them directly into your event handler.