當我的網站上的任何鏈接（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