禁用点击带有 hoverintent 的 # 链接答案

【问题标题】：Disable click on # link with hoverintent禁用点击带有 hoverintent 的 # 链接
【发布时间】：2012-06-11 05:44:24
【问题描述】：

当单击我为图像淡入使用 hoverintent 制作的此代码时，您将如何禁用链接。我现在使用的是命名锚点，但它会跳转，所以我想禁用点击。

<A class="next2 nextbuttonB" href="#top">INSTALL</A>
<A class="next2 nextbuttonA" href="#top">ESTIMATE</A>

和jquery

$('#A,#B,').addClass('nextHide');

$('.nextbuttonA').hoverIntent(function() {
$('#A').fadeIn("slow");$('#B').fadeOut();
}, function() {
$('#B').hide();
});

$('.nextbuttonB').hoverIntent(function() {
$('#B').fadeIn("slow");$('#A').fadeOut();
}, function() {
$('#A').hide();
});     

$('.nextbutton').hoverIntent(function() {
$('#A,#B').fadeOut();
}, function() {
$('#A,#B').hide();
}); 

$('#A,#B').mouseleave(function(){
    $('#A,#B').fadeOut();
});

【问题讨论】：

event.preventDefault() 或 return false 将解决问题。

标签： jquery hoverintent

【解决方案1】：

试试这个根据需要更改/添加选择器

$("#A,#B").click(function(event) {
  event.preventDefault();
});

【讨论】：

这也停止了悬停样式。所以你点击链接它会改变颜色但不会变回来......

【解决方案2】：

要么做一个

return false;

或将事件作为e 传递给您的function，然后像这样执行e.preventDefault()：

$('.next2').click(
    function(e){
       e.preventDefault(); //return false; //would also work
       //then do other stuff
});

另外，为什么要使用#top？如果你不希望它表现得像一个命名的锚？你可以使用：

<a href="javascript:void(0)">...</a>

【讨论】：

简单地使用 .. 也不会跳转。
您需要哈希标记链接用于悬停，只需一个哈希标记作为链接到文档顶部的链接，因此命名锚至少可以更接近。 jsvoid 和 preventDefault 会终止链接上的悬停样式。