web前端领域移动端自定义长按事件你用过吗?
2018-03-05 10:41
471 查看
一。在移动端开发过程中经常会用到长按事件,例如游戏中人物,长按上下左右会持续移动人物的位置,这是一个典型的长按事件的需求,但javaScript原生不支持长按事件,这就需要我们自定义一个长按事件以满足我们的需求。
1.由于移动端长按元素会触发许多默认行为,所以第一步我们要禁掉这些默认行为,css代码如下。body {
-webkit-touch-callout: none !important; /*当触摸并按住触摸目标时,禁止系统默认菜单。*/
}
.long{
-webkit-user-select: none;/*使文本元素不能被选择*/
}2.移动端有原生触摸事件,touchstart:手指触摸屏幕,touchmove:手指在屏幕上滑动,touchend:手指离开屏幕;因此我的基本思路是,当手指触摸屏幕的目标元素时启用一个定时器在固定时间间隔内反复触发某行为,当手指离开屏幕时,清理定时器停止复发该行为。
3.具体操作案例如下:这里通过长按该按钮达到下面的数组持续增长的行为。代码如下:
<style>
body {
-webkit-touch-callout: none !important;
}
.long{
-webkit-user-select: none;
}
</style>
1.由于移动端长按元素会触发许多默认行为,所以第一步我们要禁掉这些默认行为,css代码如下。body {
-webkit-touch-callout: none !important; /*当触摸并按住触摸目标时,禁止系统默认菜单。*/
}
.long{
-webkit-user-select: none;/*使文本元素不能被选择*/
}2.移动端有原生触摸事件,touchstart:手指触摸屏幕,touchmove:手指在屏幕上滑动,touchend:手指离开屏幕;因此我的基本思路是,当手指触摸屏幕的目标元素时启用一个定时器在固定时间间隔内反复触发某行为,当手指离开屏幕时,清理定时器停止复发该行为。
3.具体操作案例如下:这里通过长按该按钮达到下面的数组持续增长的行为。代码如下:
<style>
body {
-webkit-touch-callout: none !important;
}
.long{
-webkit-user-select: none;
}
</style>
<div style="margin-left: 200px;margin-top: 100px"> <button class="long" style="width:100px;height:100px; user-select: none;"></button> </div> <div style="margin-top: 100px;margin-left: 100px"> <span id="num" style="font-size: 100px;">5</span> </div>
<script> var long = document.getElementsByClassName('long')[0]; var timer = null; long.ontouchstart = function(){ plus('#num'); }; long.ontouchend = function(){ clearTimeout(timer); }; function plus(ele){ var targetEle = document.querySelector(ele); var num = parseInt(targetEle.innerText); console.log(targetEle.innerText); targetEle.innerText = ++num; timer = setTimeout(function(){ plus(ele); }, 200); } </script>
相关文章推荐
- WEB前端 | JS基础——(11)移动端事件
- 前端中移动端的事件解析
- 移动端拖拽(模块化开发,触摸事件,webpack)
- web前端-《手机移动端WEB资源整合》——meta标签篇
- 移动端WEB开发,click,touch,tap事件
- 不安分的 Go 语言开始入侵 Web 前端领域了!
- 在自定义的web监听器中嵌入web中的定时事件
- 移动端WEB开发,click,touch,tap事件
- 移动端案例、web前端项目实战(HTML5+css3)、webApp实例源码
- WEB前端问题——img标签的onclick事件无法响应问题
- 自定义Web控件写事件
- web前端自定义属性的方法
- 移动端和web端前端UI库—Frozen UI、WeUI、SUI Mobile
- web移动端触摸事件封装
- 从零开始学 Web 之 移动Web(二)JD移动端网页,移动触屏事件
- 前端编程提高之旅(十八)----移动端web流行交互技术方案研究
- web-前端之事件冒泡,其中包括(onmousemove,onmouseover,onmouseout,onmouseleave,onmouseup,onmouseentter)可用于一些计数小游戏
- Web前端开发顶尖网站的移动端布局攻略,程序员工程师的高级技能!
- 移动端WEB开发,click,touch,tap事件浅析
- 【web前端】JavaScript事件处理