在 jQuery 加载之前阻止链接

2024-01-06

如何在加载 jQuery 之前阻止点击事件上的链接?
原因是我几乎没有通过 jQuery ajax 函数进行 AJAX 调用的链接,如果用户在加载 jQuery 框架之前单击它们,浏览器将无法触发 jQuery ajax 函数,并将跟踪链接href="...".

编辑:我可以使用这个吗?

<head>
...
  <script type="text/javascript">
   window.onload = prevCl();
   function prevCl() {
    var links = document.links[];
    links.onclick = check();
   }
   function check() {
    if (typeof jQuery == 'undefined') { 
     return false;
    }
   }
  </script>
</head>

四种选择供您选择:

Option 0

Go read 肖恩·霍根的回答 https://stackoverflow.com/questions/3811513/preventing-links-before-jquery-is-loaded/3811984#3811984,他指出这可以通过授权来完成(doh!)并且我整理了一个示例实现。

Option 1

你可以使href链接“#”直到加载 jQuery,然后(如果适用)将其更改为真正应该的内容。您可以存储什么href应该在一个data-属性,例如:

<a href='javascript:;' data-href='realtarget.html'>blah</a>

Then:

jQuery(function($) {
    $("a[data-href]").each(function() {
        var $this = $(this);
        $this.attr("href", $this.attr("data-href"));
    });
});

再说一遍,最后一点仅当您确实需要将 href 设为 href 时。如果您通过 JavaScript 处理点击,则无需这样做。

如果验证是开发周期的重要组成部分,请务必注意表单中的属性data-xyz在 HTML4 及之前的版本中无效(浏览器实际上并不关心,但同样,如果您使用验证......)。它们从 HTML5 起生效。

Option 2

使用内联onclick属性在 jQuery 加载之前拦截点击,基本上是说“抱歉,稍等一下”。所以在一个script标记在top你的文件:

function sorryLoading() {
    alert("Sorry, the page is still loading, one moment please.");
    return false;
}

...然后在链接上:

<a href='realtarget.html' class='sorry' onclick='return sorryLoading();'>blah</a>

...然后删除onclick在 jQuery 加载上:

jQuery(function($) {
    $("a.sorry").removeClass('sorry').attr("onclick", "").click(yourRealClickHandler);
});

(你可以留下最后一点——click调用 - 如果它们不都具有相同的点击处理程序,则关闭。)

我使用上面的类来区分这些链接和其他可能具有内联的链接onclick(否则,令人惊讶的是,选择器“a[onclick]”实际上适用于 Linux 上的 Chrome、Opera 和 Firefox 以及 Windows 上的 IE6 和 IE8)。

Option 3

因为听起来您希望页面在 jQuery 加载之前不起作用,所以这是另一种方法:

  1. 确保 jQuery 的脚本标签位于head页面的部分(不是在底部,我通常建议将其放在底部)。
  2. 在页面的最底部,就在关闭之前body标记,连接您的点击处理程序without将它们包裹在一个jQuery.ready调用(或其任何快捷方式)。

原因是这样的:#1 将确保 jQuery 本身在页面渲染之前加载,#2 将连接处理程序尽快地。 Google 建议在页面末尾使用这样的标签(而不是ready函数或类似的函数)并表示此时 DOM 元素将准备好被发现。


当然,您还需要单独确保链接不执行用户期望的操作的时间是绝对尽可能简短通过做所有你能做的页面加载优化工作。单击链接而不让它执行其看起来的操作会导致糟糕的用户体验。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 jQuery 加载之前阻止链接 的相关文章