Javascript 如何确保链接';的默认操作始终处于禁用状态?

Javascript 如何确保链接';的默认操作始终处于禁用状态?,javascript,jquery,Javascript,Jquery,我正在从事一个项目,在这个项目中,我使用了大量ajax调用,以使站点交互更加优雅。我一直使用的过程是将指向执行适当操作的脚本的链接存储为链接标记中的href。然后,我使用jquery以该元素为目标,禁用默认操作并执行ajax调用 问题是,$(document).ready()函数有时无法正确执行,或者在用户单击链接之前延迟执行。这将导致页面通过正常浏览器加载打开 我已经实现了检测代码是通过ajax还是通过浏览器执行的代码,因此所发生的只是加载了一个空白页面。在某些情况下,我可以让它检测执行类型并

我正在从事一个项目,在这个项目中,我使用了大量ajax调用,以使站点交互更加优雅。我一直使用的过程是将指向执行适当操作的脚本的链接存储为链接标记中的href。然后,我使用jquery以该元素为目标,禁用默认操作并执行ajax调用

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

我已经实现了检测代码是通过ajax还是通过浏览器执行的代码,因此所发生的只是加载了一个空白页面。在某些情况下,我可以让它检测执行类型并做出不同的响应,但在其他情况下,如果它不是由ajax执行的,则会导致问题


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

为什么不使用以下代码:

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


摘自:

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

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

函数myFunc(){
$.ajax({
url:$(this.attr('href'),//使用所单击链接的href属性作为AJAX请求的url
键入:“get”,
成功:函数(serverResponse){
警惕(“成功”);
},
错误:函数(){
警报(“错误”);
}
});
//在jQuery事件处理程序中,返回false与调用相同:event.preventDefault();event.stopPropagation()
返回false;
}
$('.my links').bind('click',myFunc);

我能想到的一件事是将href值设置为哈希值。这将导致单击的链接实际上不起任何作用。然后可以将url存储在数据属性中

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

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

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

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


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

这里的挑战是保持低调。一种方法是使用html5数据属性。您可以指定链接的href,如下所示:

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

这不会触发其他
单击
处理程序。请务必小心使用。这将有效地禁用页面中所有锚标记的onclick。@sgarrett它只会禁用类为“我的链接”的链接@Kenneth I在Shankarsangli和sgarrett的评论后更新了我的答案。我的第一版只是演示了如何在
文档之外运行一些代码。ready
事件处理程序(OP似乎已经创建了一个绑定到事件的函数,但我还是添加了一些演示代码)。有时我不喜欢#解决方案,这会弄乱滚动条-单击滚动条后,滚动条将始终显示在顶部。因此,此链接仍然被视为触发了一个操作。您可以让click事件的函数返回false,以防止页面跳转行为。或者您可以使用event.stopPropagation(),它并不理想,但我认为它是解决这种情况的最佳解决方案。@GraceShao为什么说它不理想?@Kenneth我不太喜欢伪协议(将JavaScript放在href中)请参见。也许
更好。@Kenneth有些人认为它不理想,因为html事件标记不符合MVC(模型-视图-控制器)的理念。在这种理念下,所有功能都放在JavaScript文件中
<a href="#" data-href="actual/file/path.html">
$(document).ready(function(){
   $("a[data-href]").each(function(){
      $(this).attr("href",$(this).attr("data-href"));
   });
});