手机扫码看效果

不多说,直接上代码

<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的事件的更多相关文章

  1. touchstart,touchmove,touchend触摸事件的小小实践心得

    近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成 ...

  2. 解决红米等手机(移动端)无法触发touchend事件

    触屏事件的简单描述: js的触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是 pageX和 pageY,表示X坐标,Y坐标.touchs ...

  3. 【移动端debug-3】部分安卓机型不触发touchend事件的解决方案

    最近在项目中遇到一个奇怪的问题,有一个需求是这样:页面上有一个按钮,滚动页面时让它消失,停止滚动时让它显示. 常规思路: step1.监听touchstart事件,记录Touch对象中pageY初始值 ...

  4. 解决移动端页面滚动后不触发touchend事件

    解决移动端页面滚动后不触发touchend事件 问题 在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件.用的较多的是使用touchend事件替代PC端的click和mouseup事件. ...

  5. js 触发长按事件

    为网站添加触摸功能 <button id="btn1">长按触发</button> <button id="btn2">长按 ...

  6. QTimer太让人失望了,一秒触发一次事件都不准确。。

    今天做项目中,我用QTimer来模拟数据生成,在另外的设备上接受.另外设备上有时1秒读不到数据,查询原因很久,终于发现是QTimer的问题. 测试代码如下 有兴趣同学可以自己试试. t = new Q ...

  7. js 触发select onchange事件

    select 或text的onchange事件需要手动(通过键盘输入)改变select或text的值才能触发,本文为大家介绍下使用js触发select onchange事件select 或text的o ...

  8. vue中click阻止事件冒泡,防止触发另一个事件

    在使用el-upload组件时,在其中放置了一个删除按钮的图片. 当点击图片,本想只删除上传的视频,但是意外触发了el-upload中的事件 解决办法:用stop,结果只删除当前预览,不触发上传事件. ...

  9. input的type=file触发的相关事件

    与input相关的事件运行的过程.添加了一些相关的方法测试了一下.input的type=file的运行流程. 我们书写了mousedown,mouseup,click,input,change,foc ...

随机推荐

  1. ODEINT 求解常微分方程(4)

    import numpy as np from scipy.integrate import odeint import matplotlib.pyplot as plt # function tha ...

  2. 基于移动最小二乘法的点云曲面拟合(python)

    1.移动最小二乘法介绍 为了更好地对数据量大且形状复杂的离散数据进行拟合,曾清红等人[1]开发出一种新的算法——移动最小二乘法.这种新的最小二乘算法为点云数据的处理提供了新的方法.使用点云数据拟合曲面 ...

  3. 快捷键浏览存储过程的内容(执行文中的User Store Proc,设置快捷方式的指向usp_Name)

    虽然不常用,但使用时还是在用传统方法查看存储过程的内容, sp_helptext usp_Name;下面这段执行后可设置快捷查询usp的内容(但是需要在每个数据库下都存在,不能直接在master,并且 ...

  4. STL sort的comp函数注意事项

    今天写了个题,结果碰巧re了,我眉头一皱发现事情并不简单. 原来我之前的comp写的都是错的. bool cmp(milkman a,milkman b) { return a.price<=b ...

  5. c++无法解析的外部符号 "int const bufferSize

    无法解析的外部符号 "int const bufferSize 严重性 代码 说明 项目 文件 行 禁止显示状态错误 LNK2001 无法解析的外部符号 "int const bu ...

  6. rest_framework django 简单使用(数据库创建数据, 覆盖数据, 其他的大同小异)

    事先说几个坑:数据库定义字段时候,不要定义name 要定义 username 首先, 定义model(简单定义) from django.db import models from django.co ...

  7. 团队Github实践训练

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 团队名称 WeChair 这个作业要求在哪里 团队Github实践训练 这个作业的目标 通过github实现团队协作编码 作业正 ...

  8. Linux 集群安装zookeeper

    系统:CentOs 7 环境:jdk 8 Zookeeper 下载地址:  http://www-eu.apache.org/dist/zookeeper/stable/ 上传至服务器并解压,本人放在 ...

  9. 初识MQ消息队列

    MQ 消息队列 消息队列(Message Queue)简称MQ,是阿里巴巴集团中间件技术部自主研发的专业消息中间件. 产品基于高可用分布式集群技术,提供消息发布订阅.消息轨迹查询.定时(延时)消息.资 ...

  10. 利用c++中的设计灵感,既要学BIM分类信息表,借助GIS完成环境搭建改善

    我,一个平平无奇的城市规划专业(建筑专业.路桥专业)大学生,还有一年要毕业,很担心工作以后受到社会的毒打,遂问导师和学长,我要自学点什么技能和软件? 学长A:CAD,SketchUp,PS我都很熟练了 ...