Question

问题：

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

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

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

但是，如果JavaScript 禁用或 spider 抓取该网站，则会优雅地维护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);
};

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

请注意，此代码使用在document对象上注册的单个侦听器函数，该函数将作用于页面上的每个 <A>标记这不会为自己捕获点击次数。

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/blog/development/coding-a-ajax-site-that-degrades-gracefully-with-jquery/

请记住，凭借良好的设置服务器和缓存，您无法通过Ajax Load获得更多性能。

创建双功能html Url链接？

6 个答案: