zoukankan      html  css  js  c++  java
  • JS 长按 移动端

    实质上,长按的时间不应该过长,因为这有可能与手机系统的部分长按手势产生冲突,但也不宜过短,因为长按时间过短与点击没有任何区别,
    理论上,判断长按结束,在手机端上仅设置mouseup动作就可以,

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>无标题文档</title>  
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>  
      
    </head>  
      
    <body>  
    <div id="mydiv" style="100px; height:100px; background:#ddd;">out</div>  
    </body>  
    </html>  
      
    <script>  
    /*设置一个长按的计时器,如果点击这个图层超过2秒则触发,mydiv里面的文字从out变in的动作*/  
    var timeout ;  
       
    $("#mydiv").mousedown(function() {  
        timeout = setTimeout(function() {  
            $("#mydiv").text("in");  
        }, 2000);  
    });  
       
    $("#mydiv").mouseup(function() {  
        clearTimeout(timeout);  
        $("#mydiv").text("out");  
    });  
      
    $("#mydiv").mouseout(function() {  
        clearTimeout(timeout);  
        $("#mydiv").text("out");  
    });  
      
    </script>
    

    手机端js模拟长按事件(代码仿照jQuery)
    代码编写:

    $.fn.longPress = function(fn) {
        var timeout = undefined;
        var $this = this;
        for(var i = 0;i<$this.length;i++){
            $this[i].addEventListener('touchstart', function(event) {
                timeout = setTimeout(fn, 800);
                }, false);
            $this[i].addEventListener('touchend', function(event) {
                clearTimeout(timeout);
                }, false);
        }
    }
    

    代码使用:

    $(select).longPress(function(){
        alert(1);
    });
    
  • 相关阅读:
    在线加密解密
    ctcms Nginx 伪静态
    iTem2 保持连接,解决ssh的"Write failed: Broken pipe"问题
    打开窗口弹出页面
    点击弹窗
    javascript 技巧
    使用Chrome工具来分析页面的绘制状态
    jquery结合JSONP教程—明河谈jquery
    使用 JSONP 实现跨域通信,第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup
    jsonp详解
  • 原文地址:https://www.cnblogs.com/humi/p/8275558.html
Copyright © 2011-2022 走看看