Question

我在核心商务系统上建立了一个新的网站，它没有太多的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>

Answer 1

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

如果在页面中包含jQuery，这样做会更容易。完成后，您可以执行以下操作：

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

Answer 3

你正在做的是将点击处理程序绑定到文档，这样用户将点击代码将被执行，更改这段代码

jQuery(document).click(function()

到

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

Answer 4

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

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>

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

如果单击我站点上的任何链接（a），如何运行jQuery函数

6 个答案: