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

Question

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

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

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

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

Answer 1

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

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

取自： 我应该使用哪个“href”值用于JavaScript链接，“＃”或“javascript：void（0）”？

Answer 2

您可以在全局范围内运行代码，只需将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>

Answer 3

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

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

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

Answer 4

试试这个。

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

Answer 5

如果您希望阻止来自html的默认操作，那么这样的东西将起作用：

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

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

Answer 6

这里的挑战仍然不引人注目。 一种方法是使用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"));
   });
});