创建双功能 html Url 链接？

Question

问题：

HTML 页面中有一组常规的 URL 链接，例如：

<a href="/foo/bar">Foo Bar</a>

您想要创建一个 JavaScript 函数，以便在单击任何 HTML 链接时，客户端的浏览器不会导航到该新 URL“ /foo/bar”改为执行 JavaScript 函数（例如。例如，这可以进行 Ajaxian 调用并加载 HTML 数据，而无需重新加载页面）。

但是，如果 JavaScript 被禁用或蜘蛛爬行该网站，则 UTL 链接将得到妥善维护。

这可能吗？它已经存在了吗？通常的做法是什么？

编辑1：

这些是一些很好的答案！

只是一个后续问题：

如果用户单击后退按钮或前进按钮，这自然会中断（因为它会返回到其所在的最后一个物理页面，而不是加载的页面）。

有什么方法（跨浏览器）来维护后退/前进按钮？

（例如，创建单击的链接数组并覆盖浏览器按钮并使用该数组进行导航）？

Answer 1

<script type="text/javascript">
    function your_function() {
        alert('clicked!');
    }
</script>

<a onclick="your_function();" href="/foo/bar">Foo Bar</a>

如果 Javascript 关闭，链接将正常运行。

在这种情况下，除非 your_function() 不返回 false，否则单击链接时也会跟随该链接。

为了防止这种情况，可以让 your_function() 返回 false，或者在 onclick 属性中的函数调用之后添加 return false;：

<script type="text/javascript">
    function your_function() {
        alert('clicked!');
        return false;
    }
</script>

<a onclick="your_function();" href="/foo/bar">Foo Bar</a>

或者：

<script type="text/javascript">
    function your_function() {
        alert('clicked!');
    }
</script>

<a onclick="your_function(); return false;" href="/foo/bar">Foo Bar</a>

---

使用 element.addEventListener()

点击后默认锚点行为：

<script type="text/javascript">
    document.addEventListener("load", function() { 
        document.getElementById("your_link").addEventListener("click", function() {
            alert('clicked');
        }, true); 
    }, true);
</script> 

<a id="your_link" href="/foo/bar">Foo Bar</a>

没有：

<script type="text/javascript">
    document.addEventListener("load", function() { 
        document.getElementById("your_link").addEventListener("click", function(event) {
            event.preventDefault();
            alert('clicked');
        }, true); 
    }, false);
</script> 

<a id="your_link" href="/foo/bar">Foo Bar</a>

Answer 2

鉴于当前的 HTML 和 W3C API，我会选择：

<script src="linkify.js"> </script>

在标记中， linkify.js 包含类似以下内容：

window.onload= function() {
    document.addEventListener('click', function(ev) {
        ev.preventDefault();
        var el = ev.target;
        if (el.tagName === 'A') {
            // do stuff with el.href
        }
    }, false);
};

请参阅 http://jsfiddle.net/alnitak/nrC7G/，或 http ://jsfiddle.net/alnitak/6necb/ 适用于不使用 window.onload 的版本。

请注意，此代码使用在 document 对象上注册的单个侦听器函数，该函数将作用于每个 标记本身不会捕获点击。

Answer 3

使用 onclick 属性：

<a href="/home.html" onclick="javascript: performFunction(this); return false;">click?</a>

return false 会阻止默认行为，但在没有 JavaScript 的情况下，链接将被跟踪。

Answer 4

function do_whatever (e)
{
   e.preventDefault ();

   // do whatever you want with e.target
}

var links = document.getElementsByTagName ("a");

for (var i=0; i<links.length; ++i)
   links[i].addEventListener ('click', do_whatever);

http://jsfiddle.net/bTuN7/

全部在脚本内完成，如果 JavaScript 不会“伤害”不起作用。

如果您考虑 AJAX，那么您必须知道，googlebot 会尝试解析它。 http://www.youtube.com/watch?v=9qGGBYd51Ts

Answer 5

您可以这样编写代码：

$('a').click(function() {
    doSomethingWithURL($(this).attr('href'));
    return false;
});

如果 JavaScript 被禁用或者是某些网络爬虫，则不会执行 JavaScript，因此从我的角度来看，这是更好的选择。

Answer 6

有很多方法，例如：
http://www.malbecmedia.com malbecmedia.com/blog/development/coding-a-ajax-site-that-degrades-graceously-with-jquery/

但请记住，凭借良好设置的服务器和缓存，您将不会通过 Ajax Load 获得更高的性能。