如何让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 ...
随机推荐
- python + selenium登陆并点击百度平台
from PIL import Imagefrom selenium.webdriver import DesiredCapabilitiesfrom selenium import webdrive ...
- CentOS7.5搭建Hadoop2.7.6完全分布式集群
一 完全分布式集群搭建 Hadoop官方地址:http://hadoop.apache.org/ 1 准备3台客户机 1.2 关闭防火墙,设置静态IP,主机名 关闭防火墙,设置静态IP,主机名此处略 ...
- Chrome启动选项
1. Chrome Options 这是一个Chrome的参数对象,在此对象中使用add_argument()方法可以添加启动参数,添加完毕后可以在初始化Webdriver对象时将此Options对象 ...
- Jupyter notebook常用命令合计
shift + cr #运行该行并转入下一行 control + cr #运行该行 option + cr #运行该行并插入新行
- 从一个计算器开始说起——C#中的工厂方法模式
工厂模式作为很常见的设计模式,在日常工作中出镜率非常高,程序员们一定要掌握它的用法哟,今天跟着老胡一起来看看吧. 举个例子 现在先让我们来看一个例子吧,比如,要开发一个简单的计算器,完成加减功能,通过 ...
- SLAM:使用EVO测评ORBSLAM2
SLAM:使用EVO测评ORBSLAM2 EVO是用来评估SLAM系统测量数据以及输出估计优劣的Python工具,详细说明请参照: https://github.com/MichaelGrupp/ev ...
- 磨皮美颜算法 附完整C代码
前言 2017年底时候写了这篇<集 降噪 美颜 虚化 增强 为一体的极速图像润色算法 附Demo程序> 这也算是学习过程中比较有成就感的一个算法. 自2015年做算法开始到今天,还有个把月 ...
- Mac OS 生成 icon 和 ico 文件
[本文版权归微信公众号"代码艺术"(ID:onblog)所有,若是转载请务必保留本段原创声明,违者必究.若是文章有不足之处,欢迎关注微信公众号私信与我进行交流!] 1. 生成 IC ...
- 安装mysql报错:遇到缺少vcruntime140_1.dll文件
把vcruntime140_1.dll文件放到System32 ,和System64就行 文件地址为:C:\Windows\System32 直接百度下载放进去就行
- 手把手教你基于SqlSugar4编写一个可视化代码生成器(生成实体,以SqlServer为例,文末附源码)
在开发过程中免不了创建实体类,字段少的表可以手动编写,但是字段多还用手动创建的话不免有些浪费时间,假如一张表有100多个字段,手写有些不现实. 这时我们会借助一些工具,如:动软代码生成器.各种ORM框 ...