如何确保始终禁用链接的默认操作?

时间:2012-02-01 19:12:36

标签: javascript jquery

我正在开展一个项目,我正在使用大量的ajax调用来使网站交互更加优雅。我一直在使用的过程是获得脚本的链接,该脚本执行在链接标记中存储为href的相应操作。然后我使用jquery来定位该元素并禁用默认操作并执行ajax调用。

问题是,在用户点击链接之前,$(document).ready()函数有时无法正确执行或延迟执行。这导致页面通过正常的浏览器加载打开。

我已经实现了代码,用于检测代码是通过ajax还是通过浏览器执行,所以所有这些都是加载空白页面。在某些情况下,我可以让它检测执行类型并以不同的方式响应,但在其他情况下,如果它不是由ajax执行则会导致问题。

有没有办法确保链接的默认操作始终被禁用,无论页面的加载进度如何,或者是否有比我正在采用的方法更好的方法?

6 个答案:

答案 0 :(得分:3)

为什么不使用这样的代码:

<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>

取自:Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

答案 1 :(得分:3)

您可以在全局范围内运行代码,只需将JS代码块放在您正在使用的DOM元素(链接)之后。这样您就不依赖于事件处理程序来触发。在结束</body>标记之前放置代码块是个好地方。

    <a class="my-links" href="/path/to/server-side.***"></a>
    <script>
    function myFunc () {
        $.ajax({
            url     : $(this).attr('href'),//use the href attribute for the link clicked as the URL for the AJAX request
            type    : 'get',
            success : function (serverResponse) {
                alert('Success');
            },
            error   : function () {
                alert('Error');
            }
        });

        //in a jQuery event handler, returning false is the same as calling: event.preventDefault(); event.stopPropagation()
        return false;
    }
    $('.my-links').bind('click', myFunc);
    </script>

</body>

答案 2 :(得分:1)

我能想到的一件事是将href值设置为哈希值。这将导致点击链接基本上什么都不做。然后,您可以将URL存储在数据属性中。

<a href="#" data-url="http://..." >go</a>

$('a').click( function() { 
    var url = $(this).data('url'); 
});

答案 3 :(得分:0)

试试这个。

$('a').click( function(e) { 
    e.preventDefault();
});

答案 4 :(得分:0)

如果您希望阻止来自html的默认操作,那么类似的内容将起作用:

    <a onclick="some_function(); return false;"></a>

这不会污染您的网址#并且您不必在元素上设置href属性。此解决方案与使用jQuery的单击事件函数中的event.preventDefault();基本相同。

答案 5 :(得分:0)

这里的挑战仍然不引人注目。一种方法是使用html5数据属性。您可以做的是指定链接的href:

<a href="#" data-href="actual/file/path.html">

然后在您的document.ready中,您可以将数据属性内容交换到href属性,或者让您的单击处理程序使用数据属性而不是href属性。这样,如果用户在您的javascript绑定之前单击链接,则不会发生任何事情。要交换所有data-href属性信息,适当的href只使用jquery:

$(document).ready(function(){
   $("a[data-href]").each(function(){
      $(this).attr("href",$(this).attr("data-href"));
   });
});