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>

Answer 2

如果您想要点击打开另一个页面，为什么不在href属性中添加一个链接？像这样：<a href='http://example.com' onmouseover='method2()'>SOMETHING</a>

如何将鼠标悬停和鼠标单击同一元素

2 个答案: