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

How can I ensure that a link's default action is always disabled?

本文关键字：操作 默认 状态 于禁用 何确保 确保 链接      更新时间：2023-09-26

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

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

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

有没有一种方法可以确保无论页面的加载进度如何，链接的默认操作始终处于禁用状态，或者有没有比我所采取的方法更好的方法？

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

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

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

取自：；href"我应该为JavaScript链接使用的值#"或"；javascript：void（0）"？

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

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

 

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

试试这个。

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

如果你想阻止html的默认操作，那么这样的东西就会起作用：

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

这不会用#污染你的url，你也不必在元素上设置href属性。该解决方案本质上与在jQuery的单击事件函数中使用event.preventDefault();相同。

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

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

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

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