Javascript 在加载jQuery之前阻止链接_Javascript_Jquery_Ajax_Javascript Events_Onclick

Javascript 在加载jQuery之前阻止链接

javascript jquery ajax

Javascript 在加载jQuery之前阻止链接,javascript,jquery,ajax,javascript-events,onclick,Javascript,Jquery,Ajax,Javascript Events,Onclick,在加载jQuery之前，如何防止单击事件上的链接？原因是我几乎没有通过jQuery AJAX函数进行AJAX调用的链接，如果用户在加载jQuery框架之前单击这些链接，浏览器将无法触发jQuery AJAX函数，并将遵循链接href=“…” 谢谢编辑：我可以用这个吗 <head> ... <script type="text/javascript"> window.onload = prevCl(); function prevCl() { v

在加载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>


...
window.onload=prevCl（）；
函数prevCl（）{
var links=document.links[]；
links.onclick=check（）；
}
函数检查（）{
if（typeof jQuery=='undefined'）{
返回false；
}
}

四个选项供您选择：

选项0

去读吧，他指出这可以通过委托（doh！）来完成，我给出了一个示例实现

选项1

在加载jQuery之前，您可以设置链接“#”的

href

，然后（如果合适）将其更改为实际应该的状态。您可以在

数据-

属性中存储

href

应该包含的内容，例如：

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

同样，只有当您确实需要使用href-an-href时，才可以使用最后一点。如果您通过JavaScript处理单击，则无需这样做

如果验证是开发周期的重要组成部分，那么需要注意的是，

data xyz

格式中的属性在HTML4和之前的版本中是无效的（浏览器实际上并不关心，但是如果使用验证…）。它们从HTML5开始生效

选项2

在jQuery加载之前，使用inline

onclick

attributes拦截单击，基本上说“对不起，等一下”。因此，在文件顶部的

脚本标记中：
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
（否则，令人惊讶的是，选择器“a[onclick]”实际上适用于Chrome、Opera和Firefox for Linux以及Windows上的IE6和IE8）
选项3
由于听起来您希望页面在jQuery加载之前不起作用，所以这里有另一种方法：
确保jQuery的脚本标记位于页面的标题部分（不在底部，我通常建议放在底部）

在页面的最底部，在关闭body
标记之前，连接您的单击处理程序，而无需将其包装在jQuery.ready
调用（或其任何快捷方式）中
原因是：#1将确保在呈现页面之前加载jQuery本身，而#2将尽快连接处理程序。Google建议在页面末尾使用这样的标签（而不是ready
函数或类似的功能），并表示在这一点上，DOM元素将随时可以被发现

当然，另外，您希望通过尽可能执行所有页面加载优化操作，确保链接没有达到用户期望的时间尽可能短。单击一个链接而不让它做它看起来做的事情会导致糟糕的用户体验。
我没有尝试过，但从理论上讲，只要jquery未完成，向所有a元素添加一个不带jquery的事件处理程序可以阻止默认操作（打开链接）
getElementsByTagNames('a').addEventListener('click',function (event) {
  if (typeof jQuery == 'undefined') { 
    event.preventDeafault();
  }
},false)

您可以使用事件委派：与jQuery和方法相当的DOM
以下措施可能有效：
<head>

<script>
function linkMatcher(node) { // modify this if not all links are disabled
 if (node.href) return true;
 else return false;
}

document.onclick = function(e) {
 e = e || window.event;
 var target = e.target || e.srcElement;
 for (var node=target; node!=document; node=node.parentNode) {
  if (node.tagName == "A") return !linkMatcher(node);
 }
}
</script>
</head>

JavaScript（无论jQueryready
处理程序位于何处）：
jQuery（函数（$）{
//使用setTimeout模拟长延迟加载
setTimeout（函数（）{
//连接我们正确的点击处理
//显然，用ajax所做的任何事情来替换它
$（“a.wait”）。单击（函数（事件）{
警报（“已触发“+this.href+”链接的jQuery处理程序”）；
});
//如果禁用了单击，请启用它们
如果（窗口取消勾选）{
window.unhookClicks（）；
window.unhookClicks=未定义；
}
//我们有一个挂起的链接要跟踪吗？
if（window.pendingLink）{
//是的，抓住它，清除它
var$link=$（window.pendingLink）；
window.pendingLink=未定义；
//在其上触发任何jQuery事件处理程序。
//请注意，这不会跟随链接，
//只需触发jQuery事件处理程序
//在链接上。
$link.click（）；
}
//我们上膛了！
$（“最终加载！”）.appendTo（document.body）；
//假延迟函数的结束
}, 5000);
});
您可以尝试一种UI方法。也许创建一个预加载程序。我用一个例子更新了肖恩·霍根的答案。关于如何进行这项工作，他是绝对正确的。谢谢，但这是一个巨大的DOM操作，在SEO和页面加载速度方面也有自己的问题。：）@阿里：关于搜索引擎优化的观点很好。正如你所指出的，我添加了另一个选项。谢谢T.J。但是我有Feeeew链接，我认为javascript可以做到，但我不擅长javascript，没有框架我试图编写一个函数，但不起作用。（你能在我的问题中看一下这个函数吗？我编辑了它）@Ali：不，你不能用window.onload来做这个window.onload
在加载过程中非常、非常晚才发生（例如，jQuery.ready
之后很久）。我添加了一个选项3，但我想说选项2可能是你最好的选择。选项1对我很有效。但是，我没有使用#，它仍然将人们引导回顶级页面，而是使用了javascript:void，这样在单击时不会发生任何事情。Thanx人！这真的很有帮助。啊！当然，在呈现页面时捕捉文档级别的单击是实现这一点的方法。我冒昧地添加了一个完整的实时示例（并使用attachEvent
/add
getElementsByTagNames('a').addEventListener('click',function (event) {
  if (typeof jQuery == 'undefined') { 
    event.preventDeafault();
  }
},false)

<head>

<script>
function linkMatcher(node) { // modify this if not all links are disabled
 if (node.href) return true;
 else return false;
}

document.onclick = function(e) {
 e = e || window.event;
 var target = e.target || e.srcElement;
 for (var node=target; node!=document; node=node.parentNode) {
  if (node.tagName == "A") return !linkMatcher(node);
 }
}
</script>
</head>

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Link Click Delay Test Page</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  body {
    font-family: sans-serif;
  }
  p {
    margin: 0px;
  }
</style>
<script type='text/javascript'>
  // A scoping function to avoid creating global symbols
  (function() {
    // Figure out what to hook clicks on
    var container =
        document.body ||
        document.documentElement ||
        document;

    // Hook clicks that reach the bottom level
    hookClicks();
    function hookClicks() {
      if (container.attachEvent) {
        container.attachEvent("onclick", handleClick);
      }
      else if (document.addEventListener) {
        container.addEventListener("click", handleClick, false);
      }
    }

    // Set up an unhook function for jQuery to call
    window.unhookClicks = unhookClicks;
    function unhookClicks() {
      if (container.attachEvent) {
        container.detachEvent("onclick", handleClick);
      }
      else if (document.addEventListener) {
        container.removeEventListener("click", handleClick, false);
      }
    }

    // Handle clicks
    function handleClick(event) {
      var target;

      // Handle Microsoft vs. W3C event passing style
      event = event || window.event;

      // Get the target (again handling Microsoft vs. W3C style)
      target = event.target || event.srcElement;

      // Do we have a target that's an A with the class "wait"?
      if (target &&
          target.tagName.toUpperCase() === "A" &&
          (" " + target.className + " ").indexOf(" wait ") >= 0
         ) {
        // It's a link we want to prevent for the moment
        // Remember the element that was clicked if there
        // isn't already one (or replace it, depends on the
        // UX you want to provide
        if (!window.pendingLink) {
          window.pendingLink = target;
        }

        // Prevent it from being processed
        if (event.preventDefault) { // If W3C method...
          event.preventDefault();
        }

        // This should work if preventDefault doesn't
        return false;
      }
    }
  })();
</script>
</head>
<body>
  <p><a href='http://www.google.com' class='wait'>Google</a>
    - This one waits
  <br><a href='http://news.bbc.co.uk' class='wait'>BBC News</a>
    - This one also waits
  <br><a href='http://www.cnn.com'>CNN</a>
    - This one doesn't wait, it goes immediately
    </p>
</body>
</html>

jQuery(function($) {

  // Use setTimeout to fake a long delay loading
  setTimeout(function() {

    // Hook up our proper click handling
    // Obviously, replace this with whatever does the ajax
    $("a.wait").click(function(event) {
      alert("The jQuery handler for " + this.href + " link was triggered.");
    });

    // If we have clicks disabled, enable them
    if (window.unhookClicks) {
      window.unhookClicks();
      window.unhookClicks = undefined;
    }

    // Do we have a pending link to follow?
    if (window.pendingLink) {
      // Yes, grab it and clear it
      var $link = $(window.pendingLink);
      window.pendingLink = undefined;

      // Trigger any jQuery event handlers on it.
      // Note that this will NOT follow the link,
      // just trigger jQuery event handlers that
      // are on the link.
      $link.click();
    }

    // We've loaded!
    $("<p>Finally loaded!</p>").appendTo(document.body);

    // End of fake delay function
  }, 5000);

});