jQuery HTML 锚标记渐进增强答案

【问题标题】：jQuery HTML Anchor Tag Progressive EnhancementjQuery HTML 锚标记渐进增强
【发布时间】：2011-06-13 19:00:17
【问题描述】：

我有我写的 jQuery，它应该找到一个特定的 <a> 标记并改变它的行为。在 jQuery 加载之前，<a> 标签有一个指向另一个页面的 href 属性。我正在使用 jQuery 来更改 <a> 标记的行为，以便它不是指示浏览器加载其他页面，而是在单击时运行 javascript，在位于位置的 <div> 中动态加载内容鼠标指针。

因此，例如，我有以下内容：

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

我运行的 jQuery 执行以下操作：

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

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

})

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

【问题讨论】：

你在这里描述的是“渐进式增强”而不是“优雅降级”。

标签： javascript jquery html ajax graceful-degradation

【解决方案1】：

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

【讨论】：

【解决方案2】：

将此添加到您的点击功能：

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

这将执行方法名称所暗示的事情。

【讨论】：

【解决方案3】：

让“点击”函数返回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

【讨论】：