当我的网站上的任何链接（a）被点击时，我该如何运行jQuery功能

Question

我在corecommerce系统上建立了一个新的网站，它对HTML和非PHP没有太多的访问权限。只有我可以使用的是JavaScript。他们的系统目前在页面加载速度方面并不理想，所以我希望至少有客户知道发生了什么，而他们等待5-8秒才能加载页面。所以我找到了一些代码，并将它们放在一起，以显示加载页面时加载GIF的叠加。目前它会运行，如果你点击页面上的任何地方，但我希望它只在点击站点上的链接（任何链接）时运行。

我知道你能做到这一点，而将网页加载运行代码，但是这还不够好，因为它会执行太晚了（后几秒钟）

无论如何，这是我的网站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> 

Answer 1

你正在做什么是有约束力的点击处理程序，以便在以往任何时候用户会点击该代码会被执行的文件，更改这段代码

jQuery(document).click(function() 

到

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

Answer 2

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

Answer 3

//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 
}); 

注意：.on()是jQuery 1.7中的新增功能。

Answer 4

如果您在页面中包含jQuery，这样做会更容易。一旦做到这一点，你可以这样做：

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

Answer 5

这个怎么样 - 我认为#loading {显示：无}

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

Answer 6

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

一个问题，我在大多数情况见给出的答案是人们假设点击事件只来自<a>（锚）标签。在我的练习中，我经常将点击事件添加到span和li标签。给出的答案没有考虑到这些。

下面的解决方案嗅探包含两个事件的元素，这些元素是使用jQuery.click(function(){})或<htmlelement onclick="" />创建的。

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