javascript - 如何将鼠标悬停和鼠标单击放在同一元素上

Question

我正在使用 href 标签。我需要在鼠标悬停时打开一个弹出窗口，并需要在单击该标签时打开另一个页面。

我需要这样的东西；

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

method2() 将打开一个弹出窗口。 method1() 将重定向到另一个页面。

问题是当我尝试点击时，弹出窗口总是打开(方法 2 被调用)。如何解决这个问题？

Answer 1

无法检测用户是否有点击链接的意图。因此，每次用户在链接上输入鼠标时，都会执行弹出功能。

您可以设置超时。如果用户在该时间限制内没有点击链接，弹出窗口将得到提醒

$(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>