javascript - 创建双功能 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()

点击后默认 anchor 行为:

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