手机扫码看效果

不多说,直接上代码

<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. Python:列表和列表的增删改查

    目录 列表 列表的取值 通过下标 切片 用len()取得列表的长度 用下标改变列表中的值 列表连接和列表复制 用 del 语句从列表中删除值 in和not in操作符 多重赋值 列表的方法 查找 增加 ...

  2. 修改MSSQL的端口地址_TcpPort_数据库安装工具_连载_2

    修改MSSQL的端口地址_TcpPort,可在程序中调用,从而修改TcpPort Use master Go ------------------------------ --1)在注册表中查询 Pi ...

  3. xdoj 2020校赛复盘

    平时写东西都不喜欢复盘,这肯定不是一个好习惯,感觉每次花好几个小时甚至好几天写题目然后没写出来也不去看题解是一种很蠢的行为( 花了这么久时间打校赛,虽然水平很low,数据结构也不太会用,还是记录一下自 ...

  4. 添加cookie绕过登陆

    添加cookie绕过登陆 #!/usr/bin/env python # -*- coding: utf-8 -*- from selenium import webdriver import tim ...

  5. Java8新特性之流stream

    <Java 8 实战>学习笔记系列 定义 流是Java API的新成员,它允许你以声明性方式处理数据集合,可以把它看成遍历数据集的高级迭代器 示例 List<String> t ...

  6. 西门子S7-300 PLC视频教程(百度网盘)收集于网络-供参考学习

    百度网盘地址: 西门子300 PLC视频教程 群文件里面可以找到. 下载: https://blog.csdn.net/txwtech/article/details/93016190

  7. C/C++语言的学习方向

    这个世界上有太多的坑,如果我们不具备查阅资料的能力和对现实世界的思考能力,入坑是大概率的事情. C/C++语言能做什么?C/C++程序员在做什么?企业需要什么样的C/C++程序员?对初学者来说,要搞清 ...

  8. .Net Core微服务入门全纪录(六)——EventBus-事件总线

    前言 上一篇[.Net Core微服务入门全纪录(五)--Ocelot-API网关(下)]中已经完成了Ocelot + Consul的搭建,这一篇简单说一下EventBus. EventBus-事件总 ...

  9. Ubuntu16.04CPU下安装caffe的艰苦历程

    我选用的是anaconda安装,符上我参照的三个有用的教程. 1 http://www.linuxdiyf.com/linux/22442.html 主要讲anaconda的安装和python路径配置 ...

  10. tableau入门学习笔记--分页功能

    最近在使用tableau来制作报表,对于tableau也是第一次接触并使用,每天学习些新的功能来记录在博客里,给他人方便,也给自己方便 tableau分页功能 很多时候由于工作表过长而出现拖拽条,如果 ...