移动端 jquery、zepto 长按触发移动事件

最新推荐文章于 2022-06-24 16:21:48 发布

曲线人

最新推荐文章于 2022-06-24 16:21:48 发布

阅读量2.5k

点赞数

分类专栏：前端开发文章标签：移动端 jquery zepto 长按触发移动事件

本文链接：https://blog.csdn.net/qq_27596047/article/details/68060775

版权

前端开发专栏收录该内容

23 篇文章 0 订阅

订阅专栏

增加了对长按时间的判断，区分单击事件和长按事件

点击右边话筒

弹出相应的效果界面

CSS代码

.sound-recording {
	width: 150px;
	height: 143px;
	position: fixed;
	top: 50%;
	left: 50%;
	padding: 20px;
	margin-top: -71px;
	margin-left: -75px;
	background: rgba(0,0,0,.3);
	border-radius: 5px;
	display: none;
}
.sound-recording dl {
	width: 100%;
	font-size: 0;
}
.sound-recording dl i {
	width: 50px;
	height: 73px;
	display: inline-block;
	background: url(../images/bg/icon_home_speak.png) center center no-repeat;
	background-size: 100% 100%;
}
.sound-recording dl dt {
	width: 50%;
	display: inline-block;
}
.sound-recording dl dd {
	width: 50%;
	display: inline-block;
	padding-left: 10px;
	text-align: right;
}
.sound-recording dl dd span {
	max-width: 48px;
	background: #fff;
	display: block;
	margin-top: 10px;
	height: 2px;

	border-radius: 2px;
}
.sound-recording p {
	width: 100%;
	text-align: center;
	font-size: 1.2rem;
	color: #fffefe;
	padding-top: 15px;
}

html代码

<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />  
<title>触摸事件</title>  
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script><!--或者 <script src="/themes/bqg/js/lib/zepto.min.js"></script>-->
<style>
</head>  
  
    <div class="sound-recording">
  	<dl>
     	<dt><i></i></dt>
          	<dd>
          		<span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
           </dd>
      </dl>
      <p>2秒找到合适医生</p>
   </div> 
  
</html>

js代码：

<script>  
    /*设置一个长按的计时器，如果点击这个图层超过2秒则触发，mydiv里面的文字从out变in的动作*/    
    var timeout = undefined;  
    var x=0;  
    var y=0;  
    var state=0;  
    var lastTime=null;    
    var nowTime=null;  
  
    var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;  
    $(function () {  
        /*触摸移动*/  
        $("#sound-recording").on("touchmove", function (event) {  
            event.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动  
            if(state==1){  
                    //start_x=0;  
                    //var start_x = event.originalEvent.targetTouches[0].clientX + document.body.scrollLeft - document.body.clientLeft;  
              var start_y = event.originalEvent.targetTouches[0].clientY+ document.body.scrollTop - document.body.clientTop;  
                  
                    //x=start_x;  
                    y=start_y;  
                    //$("#sound-recording").css("left",x);                    
$("#sound-recording").css("top",y);  
$("#sound-recording").html(y);  
 var top=$("#sound-recording").css("top").substring(0,$("#sound-recording").css("top").length-2);

if(top <= 10){ $("#sound-recording").css("top",10); 

return false; } if(top >= (h-10-$("#sound-recording").height())){ 

$("#sound-recording").css("top",h-10-$("#sound-recording").height()); 

} } }); $("#sound-recording").on("touchstart", function (event) { 

lastTime=new Date().getTime(); event.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动 clearTimeout(timeout); state=0; timeout = setTimeout(function() { state=1; }, 1000); }); $("#sound-recording").on("touchend", function (event) {

event.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动 clearTimeout(timeout); state=0; nowTime=new Date().getTime(); var timeLength=nowTime-lastTime; if(timeLength<1000){ $("#loadLayer").show(); window.history.go(-1); } }); }); </script>