如何让touchmove之后不触发touchend的事件
手机扫码看效果

不多说,直接上代码
<ul id="Ul">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
<li>777</li>
<li>888</li>
<li>999</li>
<li>000</li>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
<li>ggg</li>
<li>hhh</li>
<li>iii</li>
<li>jjj</li>
<li>kkk</li>
<li>lll</li>
<li>mmm</li>
<li>nnn</li>
<li>ooo</li>
<li>ppp</li>
<li>qqq</li>
</ul>
*{
margin:;
padding:;
border:;
}
ul{
list-style: none;
}
li{
line-height: 2em;
border-bottom: 1px solid #eee;
width: 100%;
text-indent: 2em;
}
var UL = document.getElementById('Ul');
var moves = true;
function Alert(ev){
if(moves)
alert(ev.target.innerHTML)
}
UL.addEventListener('touchmove',function(){
moves = false;
UL.addEventListener('touchend',function(){
moves = true;
})
})
UL.addEventListener('touchend', Alert)
原理:
1. 设置一个变量moved来标识是否有移动过,初始值为false;
2. 绑定touchend事件,将moved置为true;
3. 绑定touchmove事件,将moved置为false;
4. 在touchmove事件函数中继续绑定touchend事件,再将moved置为true
---恢复内容结束---
如何让touchmove之后不触发touchend的事件的更多相关文章
- touchstart,touchmove,touchend触摸事件的小小实践心得
近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成 ...
- 解决红米等手机(移动端)无法触发touchend事件
触屏事件的简单描述: js的触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是 pageX和 pageY,表示X坐标,Y坐标.touchs ...
- 【移动端debug-3】部分安卓机型不触发touchend事件的解决方案
最近在项目中遇到一个奇怪的问题,有一个需求是这样:页面上有一个按钮,滚动页面时让它消失,停止滚动时让它显示. 常规思路: step1.监听touchstart事件,记录Touch对象中pageY初始值 ...
- 解决移动端页面滚动后不触发touchend事件
解决移动端页面滚动后不触发touchend事件 问题 在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件.用的较多的是使用touchend事件替代PC端的click和mouseup事件. ...
- js 触发长按事件
为网站添加触摸功能 <button id="btn1">长按触发</button> <button id="btn2">长按 ...
- QTimer太让人失望了,一秒触发一次事件都不准确。。
今天做项目中,我用QTimer来模拟数据生成,在另外的设备上接受.另外设备上有时1秒读不到数据,查询原因很久,终于发现是QTimer的问题. 测试代码如下 有兴趣同学可以自己试试. t = new Q ...
- js 触发select onchange事件
select 或text的onchange事件需要手动(通过键盘输入)改变select或text的值才能触发,本文为大家介绍下使用js触发select onchange事件select 或text的o ...
- vue中click阻止事件冒泡,防止触发另一个事件
在使用el-upload组件时,在其中放置了一个删除按钮的图片. 当点击图片,本想只删除上传的视频,但是意外触发了el-upload中的事件 解决办法:用stop,结果只删除当前预览,不触发上传事件. ...
- input的type=file触发的相关事件
与input相关的事件运行的过程.添加了一些相关的方法测试了一下.input的type=file的运行流程. 我们书写了mousedown,mouseup,click,input,change,foc ...
随机推荐
- Excel常用公式大全
公式是单个或多个函数的结合运用. AND “与”运算,返回逻辑值,仅当有参数的结果均为逻辑“真(TRUE)”时返回逻辑“真(TRUE)”,反之返回逻辑“假(FALSE)”. 条件判断 AVERAGE ...
- isinstance用法
''' 作用:来判断一个对象是否是一个已知的类型. 其第一个参数(object)为对象,第二个参数(type)为类型名(int...)或类型名的一个列表((int,list,float)是一个列表). ...
- CentOS Linux release 7.7.1908 (Core)--rabbitmq用户创建以及相关防火墙端口开启问题
增加访问用户,默认用户guest只能本地访问. #添加用户 rabbitmqctl add_user 账号 密码 rabbitmqctl add_user admin admin #分配用户标签(ad ...
- 【JMeter_10】JMeter逻辑控制器__ForEach控制器<ForEach Controller>
ForEach控制器<ForEach Controller> 业务逻辑: ForEach控制器一般与用户自定义变量/JDBC结果变量一起使用,可以认为他就是一种遍历型循环,该节点下的脚本内 ...
- Windows 程序设计(4) MFC-02 基本控件-下
1. TabCtrl 标签控件 1.1 创建主窗口 1)CMFCTabControlDlg,拖拽标签控件 2)增加变量 CTabCtrl m_tabCtrl 3)设置相关成员变量和处理函数 CFile ...
- vulstack红队评估(一)
一.环境搭建: 1.根据作者公开的靶机信息整理: 虚拟机初始所有统一密码:hongrisec@2019 因为登陆前要修改密码,改为了panda666... 2.虚拟网卡网络配置: ①Win7双 ...
- Task.Result跟 Task.GetAwaiter.GetResult()相同吗?怎么选?
前几天在用线程池执行一些任务时运到一种情形,就是回调方法中使用到了异步方法,但是回调方法貌似不支持async await的写法.这时候我应该如何处理呢?是使用Task.Result来获取返回结果,还是 ...
- JSON类库Jackson优雅序列化Java枚举类
1. 前言 在Java开发中我们为了避免过多的魔法值,使用枚举类来封装一些静态的状态代码.但是在将这些枚举的意思正确而全面的返回给前端却并不是那么顺利,我们通常会使用Jackson类库序列化对象为JS ...
- Perl入门 - Perl方法的使用
1.定义一个方法 Perl使用sub定义方法. 语法: sub 方法名称{方法体} 2.调用一个方法 Perl直接使用方法名称调用方法. 调用方式有以下四种: 方法名称: &方法名称: 方法名 ...
- android屏幕适配的全攻略--支持不同的屏幕尺寸适配平板和手机
一. 核心概念与单位详解 1. 什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕分辨率越大,手机越清晰 dpi就是dot per inch dot意思是点,就是每英寸上面的像素点数 android原始 ...