how to put mouseover and mouseclick on same element

Question

I am using a href tag. I need to open one popup on mouseover and need to open another page on clicking that tag.

I need something like this;

<a href='#'onclick='method1();' onmouseover ='method2();'>SOMETHING</a>

method2() will open a popup. method1() will redirect to another page.

The problem is that when i try to click, popup is opening always (method2 gets called). How to fix this?

Answer 1

There is no way to detect user's intention of clicking or not the link. So, every time user enters the mouse over the link, the popup function will get executed.

You could set a timeout. If user does not click the link in that time limit, the popup will get alerted

$(document).on('mouseenter', '#link', function() {
  setTimeout(function() {
    var that = $(this);
    if (!that.hasClass('clicked')) {
       alert('popup on hover!!');
    }
  }, 1000);
});

$(document).on('click', '#link', function() { 
  var that = $(this);
  that.addClass('clicked');
  alert('clicked!!');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="link" href="">Link</a>