How to find mouseclick first and if not clicked, then go for mouseover

Question

How to find mouseclick first and if not clicked, then go for mouseover ?

I had implemented two types of functionalities in two mouse events. One in mouseover and the other in mouseclick .

If I clicked, i need to trigger mouseclick event first, instead of mouseover event. I know that by default, mouseover is triggered first. But how to achieve this type of scenario.

Code:

$('.example').mouseover(function (event) {
    // ...
    //mouse over logic
    // ...
});

$('.example').mouseclick(function (event) {
    // ...
    //mouse click logic
    // ...
});

Note:

Alos, I tried with timer, set control flags but in each try, only mouseover is triggerd first. Both mouseover and mouseclick has different functionalities. If both are same, then we can put in common. But, here the case is different. I had also searched over the net for this. But nothing helped till now. Thanks.

Answer 1

Use the following:

var timer;
$(".example").on("mouseenter",function(e){
        timer=setTimeout(function(){ 
            // onmouseenter if not clicked
            $(".example").css({background:"red"});    // for testing
        }, 2000);
});

$('.example').click(function (event) {
    clearTimeout(timer);   // Don't call the onmouseenter
    $(".example").css({background:"blue"});    // for testing
});

https://jsfiddle.net/ozgvfjzs/

Answer 2

What about defining the mouseover event in the click event?

Example:

$('.example').mouseclick(function (event) {
    // ...
    //mouse click logic
    // ...
    $(body).bind('onmouseover', '.example'){
         // mouseover logic
    }
 });

I didn't tested tough...

Answer 3

You have 2 options:

• Trigger the event manually:

   $(this).trigger('mousehover'); 

  Place that inside the click handler.

• Store the handler in a variable and run it manually inside the click handler.

Should be easy enough to implement it yourself