Javascript 创建一个双功能html Url链接？

问题：

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

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

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

但是，如果禁用了JavaScript，或者爬行器对站点进行爬行，则UTL链接将被优雅地维护

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

编辑1:

这些都是很好的答案

下面是一个问题：

如果用户单击“后退”按钮或“前进”按钮，这将自然中断（因为它将返回到上一个物理页面，而不是加载的页面）

是否有任何方法（跨浏览器）来维护后退/前进按钮

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

或：

函数你的函数{
警报（'clicked！'）；
}

---

使用

默认锚定行为如下所示：

<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>

document.addEventListener（“加载”，函数（）{
document.getElementById（“您的链接”）.addEventListener（“单击”，函数（）{
警报（“点击”）；
}，对）；
}，对）；

没有：

<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>

document.addEventListener（“加载”，函数（）{
document.getElementById（“您的链接”）.addEventListener（“单击”），函数（事件）{
event.preventDefault（）；
警报（“点击”）；
}，对）；
}，假）；

您可以编写如下代码：

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

---

如果JavaScript被禁用或是某个网络爬虫，则不会执行JavaScript，因此在我看来，这是最好的选择。

使用

onclick

属性：

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

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

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

---

返回false

会阻止默认行为，但是在没有JavaScript的情况下，会遵循链接。

有很多方法，例如：

不过，请记住，由于服务器设置良好，并且缓存良好，使用Ajax负载不会获得太多性能

函数做任何事情（e）
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);

{
e、 防止违约（）；
//用e.target做任何你想做的事
}
var links=document.getElementsByTagName（“a”）；
对于（var i=0；i给定当前HTML和W3C API，我会选择：

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

例如，有关不使用
window.onload
的版本，请参阅或

请注意，此代码使用注册在
文档
对象上的单个侦听器函数，该函数将作用于页面上的每个
标记，而这些标记本身不会捕获点击。
@David Thomas:jQuery基本上是JavaScript，我不明白为什么不在这里使用它。jQuery是JavaScript，是的；但是。有些人不想导入li为一个点击处理者而鼓掌（这是一个个人选择，由提问者自己选择）。我个人更喜欢使用jQuery库进行抽象（如果没有其他内容的话）。但是OP没有提到他想这么做。@David Thomas：没错-对不起。我只是不喜欢通过HTML添加处理程序。事实上，现在除了
标记之外，没有必要在标记中显示任何JSs、 这并不意味着它必须是jQuery，就像我自己喜欢的那样。
onclick
是olde worlde DOM0的东西-更好的是，从元素中删除JS代码，并使用
element.addEventListener（）动态添加JS代码。
element.addEventListener（）
对新手来说不那么直观。首先让他们编写javascript，然后让他们学习更多的相关技术。@Michael OMG不！我们应该做的最后一件事是鼓励新手学习过时的技术。这就是通往一代“程序员”的道路他们认为w3schools.com是JS圣经。@Alnitak w3schools不是JS圣经？@Alnitak，我不是认真的。但是谢谢你提醒我真相的源泉：）你为什么不使用
element.addEventListener（）
发布答案供提问者参考？
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);

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

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