jQuery HTML 锚标记渐进增强

Question

我编写了 jQuery，它应该找到特定的 标签并更改其行为。在 jQuery 加载之前， 标记具有指向另一个页面的 href 属性。我正在使用 jQuery 来更改 标记的行为，这样它就不会指示浏览器加载其他页面，而是在单击时运行 javascript，在 中动态加载内容

位于鼠标指针的位置。

因此，例如，我有以下内容： <代码>

<a class="funk" href="http://example.com/page2.html">Link</a>
<div class="hidden bubble">Load this instead.</div>

The jQuery I have running does the following:

$(document).ready(function(){
        $('.bubble').hide()
        $('.bubble').removeClass('hidden');
        $('.funk').attr('href', '#');


    $('.funk').click(function(e){
        $('.bubble').show();
    })


 })

我遇到的问题是：每当用户单击链接时，浏览器都会对 href="#" 属性进行操作，并将浏览器滚动到页面顶部。使我的网站最“正确”的方法是什么，以便浏览器根本不滚动，而只是执行我为单击事件编写的 jQuery 代码？

Answer 1

让“click”函数返回false。这会取消该事件，并且浏览器不会点击该链接。在这种情况下，您甚至可以让 href 属性保持其原始值。

$('.funk').click(function(e){
    $('.bubble').show();
    return false;
//--^
})

为了保存，您可以显式取消该事件：

e.preventDefault(); // no default action
e.stopPropagation(); // event doesn't bubble up or down in the DOM

Answer 2

将其添加到您的点击函数中：

$('.funk').click(function(e){
    e.preventDefault();
    e.stopPropagation();
    $('.bubble').show();
});

这将执行方法名称所暗示的操作。

Answer 3

在点击处理程序中调用 e.preventDefault()。
http://api.jquery.com/event.preventDefault/