html实现网站全局按钮点击后置灰，不允许连续点击 

 1 <script>
 2     document.addEventListener("mouseup", upHandler, true);
 3     function upHandler(e){
 4         var target=undefined;
 5         //元素类型即BUTTON
 6         if(e.target.tagName=='BUTTON'||(e.target.type!=undefined&&e.target.type.toUpperCase()=="BUTTON"))
 7         {
 8             target=e.target;
 9         }//样式按钮
10         else if($(e.target).hasClass('btn')) {
11             target=e.target;
12             if(e.target.parentElement.tagName=='A')
13             {
14                 //<a><span class="btn">按钮<span></a>
15                 target=e.target.parentElement;
16             }
17         }
18 
19         if(target!=undefined)
20         {
21             ///事件执行先后顺序，如果直接在mouseup里面置灰，会屏蔽掉原有的点onclick击事件
22             // mousedown>mouseup>onclick>click>on()
23             $(target).click(function(){
24                 //a标签disabled属性无效
25                 if(target.tagName=='A')
26                 {
27                     $(target).addClass('a-disabled');
28                     setTimeout(function(){
29                         $(target).removeClass('a-disabled');
30                     },2000);
31                 }
32                 else{
33                     target.setAttribute('disabled','disabled');
34                     setTimeout(function(){
35                         target.removeAttribute('disabled');
36                     },2000);
37                 }
38 
39             });
40         }
41     };
42 </script>
1 <style>
2     .a-disabled
3     {
4         opacity: 0.6;
5         cursor: default;
6         pointer-events: none;
7     }
8 </style>

 

posted @ 2017-06-16 11:19  风谷逍遥客  阅读(1043)  评论(0)    收藏  举报