zoukankan      html  css  js  c++  java
  • jquery防止快速点击

    jquery防止快速点击(推荐第三种方式)
     //全站ajax加载提示
     (function ($) {
         var str = '<div class="ajax-status" style="display: none;">'
                  +    '<div class="ajax"><img src="' + publicPath + 'img/loading.gif" width="20" height="20" />数据加载中...</div>'
                 +'</div>';
         var dom = $(str).prependTo('body');
         $(document).ajaxStart(function(){
             dom.stop(true,false).queue(function(){
                 $(this).show().dequeue();
             });
         });
         $(document).ajaxStop(function(){
             dom.queue(function(){
                 $(this).hide().dequeue();
             });
         });
     })(jQuery);
    ===========================
    <html> 
    <head> 
    <title>点击获取验证码按钮后按钮变灰,倒计时一段时间后又可重复点击</title> 
    </head> 
    <body> 
    <input type="button" id="btn" value="免费获取验证码" /> 
    <script type="text/javascript"> 
    var wait=60; 
    function time(o) { 
            if (wait == 0) { 
                o.removeAttribute("disabled");           
                o.value="免费获取验证码"; 
                wait = 60; 
            } else { 
                o.setAttribute("disabled", true); 
                o.value=wait+"秒后可以重新发送"; 
                wait--; 
                setTimeout(function() { 
                    time(o) 
                }, 
                1000) 
            } 
        } 
    document.getElementById("btn").onclick=function(){time(this);} 
    </script> 
    </body> 
    </html> 
    =====================
    歪门邪道法:
      设置一个透明div 与页面最上层 然后自动消失 使得点击不到按钮 (简单好用)

    <style>
      #preventClick { 100%; height:100%; position:absolute; z-index:1000; top:0; left:0; display:none;}
    </style>
    <div id="preventClick"></div>
    <button onclick="consolerr()">测试按钮</button>
    <script>
    function consolerr(){
      console.info(12358);
      //alert(12);
      onDeviceReady();
    }
    function onDeviceReady() {
      $('#preventClick').show();
      setTimeout(function(){ $('#preventClick').hide(); }, 3000);
    }
    </script>

     
  • 相关阅读:
    CSS 定位position
    new Date(time).getTime()在ios返回NaN
    babel.js 文件 browser.min.js
    export 和 export default 的区别
    第一个webpack例子demo1
    Kafka源码解析与实战
    Redis实战
    RabbitMQ实战
    Spring源码理解
    Java并发编程实践
  • 原文地址:https://www.cnblogs.com/ryans/p/6560117.html
Copyright © 2011-2022 走看看