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);
    });
    
  • 相关阅读:
    java基础 IO流
    删除API
    Get API
    Document APIs
    使用Java High Level REST Client操作elasticsearch
    Azure 上的物联网产品介绍
    SSIS Passing Parameters to an ADO .NET Source query;向ado.net数据源传递参数。
    Azure API Management(5)缓存
    Azure API Management(6)Validate JWT Token
    Azure API Management(4)体验APIM 版本管理
  • 原文地址:https://www.cnblogs.com/humi/p/8275558.html
Copyright © 2011-2022 走看看