如何在网站上单击任何链接（a）时运行jQuery函数

Question

我有一个建立在CoreCommerce系统上的新网站，该系统没有太多HTML访问权限，也没有PHP访问权限。我只能使用JavaScript。他们的系统当前在页面加载速度方面不是很好，所以我希望至少让客户知道在等待5-8秒钟页面加载时会发生一些事情。因此，我找到了一些代码片段，并将它们组合起来，在页面加载时显示覆盖加载GIF。目前，只要单击页面上的任何位置，它就会运行，但我希望它仅在单击站点上的链接（a href）时运行（任何链接）。

我知道您可以编写在页面加载时运行的代码，但这还不够好，因为它会在几秒钟之后执行。

无论如何，这是我的网站www.cosmeticsbynature.com，这是我使用的代码。任何帮助都将是伟大的。

<div id="loading"><img src="doen'tallowmetopostanimage" border=0></div>


<script type="text/javascript">
var ld=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
  if (ns4)
 ld=document.loading;
 else if (ns6)
 ld=document.getElementById("loading").style;
 else if (ie4)
 ld=document.all.loading.style;
jQuery(document).click(function()
{
if(ns4){ld.visibility="show";}
else if (ns6||ie4)
var pb = document.getElementById("loading");
pb.innerHTML = '<img src="http://www.cosmeticsbynature.com/00222-1/design/image/loading.gif" border=0>';
ld.display="block";
});
</script>

- erezwe

Answer 1

如果您在网页中包含jQuery，那么这样做就会更容易。一旦完成，您可以执行以下操作:

$('a').click(function() {
 // .. your code here ..
 return true; // return true so that the browser will navigate to the clicked a's href
}

- techfoobar

Answer 2

//to select all links on a page in jQuery
jQuery('a')

//and then to bind an event to all links present when this code runs (`.on()` is the same as `.bind()` here)
jQuery('a').on('click', function () {
    //my click code here
});

//and to bind to all links even if you add them after the DOM initially loads (`on()` is the same as `.delegate()` here; with slightly different syntax, the event and selector are switched)
jQuery(document).on('click', 'a', function () {
    //my click code here
});

注意：jQuery 1.7 中出现了新的 .on() 方法。

- Jasper

Answer 3

你正在将点击处理程序绑定到文档，因此无论用户在哪里单击，代码都将被执行，请更改此代码片段。

jQuery(document).click(function()

到

jQuery("a").click(function()

- Rafay

Answer 4

$("a").click(function(){
 //show the busy image
});

- Derk Arts

Answer 5

这样怎么样 - 我假设 #loading { display:none}。

<div id="loading"><img src="http://www.cosmeticsbynature.com/00222-1/design/image/loading.gif" border=0></div>
<script type="text/javascript">
document.getElementById('loading').style.display='block'; // show the loading immediately
window.onload=function() 
  document.getElementById('loading').style.display='none'; // hide the loading when done
}
</script>

- mplungjan

Answer 6

http://jsfiddle.net/vol7ron/wp7yU/

我看到大多数答案中存在的问题是人们假设点击事件只来自（锚）标签。在我的实践中，我经常为和

标签添加点击事件。所给出的答案没有考虑到这些。

下面的解决方案会检测同时包含jQuery.click(function(){})或事件的元素。

$(document).ready(function(){

    // create jQuery event (for test)
    $('#jqueryevent').click(function(){alert('jqueryevent');});

    // loop through all body elements
    $('body *').each(function(){

        // check for HTML created onclick
        if(this.onclick && this.onclick.toString() != ''){
           console.log($(this).text(), this.onclick.toString());
        }

        // jQuery set click events
        if($(this).data('events')){           
            for (key in($(this).data('events')))
                if (key == 'click')
                   console.log( $(this).text()
                              , $(this).data('events')[key][0].handler.toString());
        }
   });
});

使用上述方法，您可能希望创建一个数组，并将找到的元素添加到数组中（在您看到console.log的每个位置）

- vol7ron

---

另一个问题是盲目回答所问的问题，而不尝试解决实际问题...我不确定原帖作者实际上是否需要一个点击任何东西的jQuery解决方案。 - mplungjan

你说得对，然而这个答案虽然使用了jQuery的部分功能（主要是用于循环对象），但它使用了基本的JavaScript来解决我所描述的问题（非锚链接）——if(this.onclick && this.onclick.toString() != ''){ ... do what's needed ... }是解决方案的核心，而且并不是jQuery。 - vol7ron