CODEWITHSUNDEEP
javascriptjqueryhtml
Mahesh Narayanan
Mahesh Narayanan

Reputation: 133

how to put mouseover and mouseclick on same element

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?

Upvotes: 3

Views: 2862

Answers (2)

Labbed
Labbed

Reputation: 31

If opening another page on click is all you want to do, why not just put a link in the href attribute? Like this: <a href='http://example.com' onmouseover='method2()'>SOMETHING</a>

Upvotes: 0

kapantzak
kapantzak

Reputation: 11750

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>

Upvotes: 1

Related Questions