用touchend写的点击事件 弊端

最新推荐文章于 2023-08-23 11:36:35 发布
最新推荐文章于 2023-08-23 11:36:35 发布
阅读量245 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39598092/article/details/106789345
版权

首页 点击顶部是可以跳转到搜索页面的

搜索页面

页面操作是 我点击首页的经典 跳转到经典的列表页面

当我点击经典列表页面的返回按钮时 问题出现了 会直接跳转到搜索页面 查找了很多的资料 后来我把代码中

touchend换成click就没有这个问题了

touchend和click的区别 可以看 https://blog.csdn.net/lululove19870526/article/details/44345759

所以touchend还是慎用

闲人有点忙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端开发touchstart，touchmove，touchend事件详解使用
m0_38109616的博客
03-28 4002
页面使用到了触摸事件"touchstart"，“touchmove”，“touchend”。需求：当你手指接触到屏幕并向左滑动时，被滑动的服务商信息开始向左滑动同时出现"编辑"和"停用"操作按钮。若继续用手指向右滑动，那么就会隐藏"编辑"和"停用"按钮，回到一开始的正常状态。下图展示了向左滑动和向右滑动产生的效果。 从一开始到左滑动完成： 从左滑动完成开始向右滑动知道完成。 触摸事件（touch Events） 　　　　touchstart,touchmove,touchend事件都有13个事件属
JavaScript移动端的手指触摸touch事件
weixin_48602044的博客
07-07 1970
JavaScript移动端的手指触摸touch事件
微信小程序（触控事件）
weixin_45626166的博客
11-29 802
事件类型 在编写代码中，使用频率高的事件方式是 事件类型 常见的事件类型 事件绑定 事件绑定的写法同组件的属性，以 key、value 的形式 ①key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtap等。自基础库版本 1.5.0 起，在非原生组件中，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart ②v...
手机端拖拽事件，获取pageX和pageY坐标方式
web前端开发-linglong
10-10 1万+
手机端拖拽事件： touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。 touchend事件：当手指从屏幕上离开的时候触发。 touchcancel事件：当系统停止跟踪触摸的时候触发。
「移动端」touch事件，touchEvent对象
前端人的博客
08-25 1904
随着智能手机普及，有越来越多的手机网页和网页版游戏，手机触摸、移动、旋转等等，多种操作。一般电脑的人机交互靠的是鼠标，而手机用的就是触摸。区别有： PC 端一个电脑只能有一个鼠标，而移动端有多点触摸。 PC 端添加效果使用 mouseup、mousedown、mousemove，而移动端使用的 touchstart、touchmove、touchend 。 一、touch事件类型 touchstart - 手指触摸屏幕，在元素上按下时触发 touchmove - 手指移动，在元素上按下之后屏幕上任意
vue h5页面 解决touchstart，touchmove，touchend，click事件触发产生的问题
maoyuanh的博客
02-15 4076
我的思路是，触发touchstart方法的时候延迟200毫秒如果是就是触摸事件，否则在touchend里面判断就是点击十点，调用点击事件的方法即可。当你的需要即要求可以完成触摸事件，又要求有点击事件的时候，我们要搞清楚一个问题，事件触发的排序问题。
vue通过点击事件读取音频文件的方法
08-27
Vue 通过点击事件读取音频文件的方法 ...最后，在点击事件的处理方法中，使用 `new Audio()` 构造函数来创建音频对象，并播放音频文件。 希望本文能够对大家有所帮助，如果大家有任何疑问请随时留言。
HTML5触摸事件(touchstart、touchmove和touchend)的实现
11-20
`touchend`事件通常用于执行与触摸相关的操作，比如按钮点击或手势识别。 4. **touchcancel事件**：当系统无法继续跟踪触摸操作时触发，可能是因为手指离开了屏幕或者设备出现了其他中断。具体触发条件在文档中并未...
HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
10-22
本文主要介绍HTML5实战与剖析之触摸事件，介绍的比较详细，需要的朋友可以参考下。
移动端Html5中百度地图的点击事件
12-14
我之前做一个需求时，给地图监听了 touchend 事件，不曾想当我拖动地图时，也执行了 touchend 里的代码。所以需要模拟一个像 zepto 中的 tap 事件，就能解决这个问题了。 我的代码是： function initMap(baseData) ...
处理vue中的长按事件、点击事件、默认事件冲突
最新发布
coldriversnow的专栏
08-23 2874
touchstart: // 手指放到屏幕上时触发touchend: // 手指离开屏幕时触发touchmove: // 手指在屏幕上滑动式触发touchcancel: // 系统取消touch事件的时候触发。
移动互联网终端的touch事件,touchstart, touchend, touchmove
leiyongping的专栏
12-15 598
前言 如果我们允许用户在页面上用类似桌面浏览器鼠标手势的方式来控制WEB APP，这个页面上肯定是有很多可点击区域的，如果用户触摸到了那些可点击区域怎么办呢?? 诸如智能手机和平板电脑一类的移动设备通常会有一个电容式触摸屏（capacitive touch-sensitive screen），以捕捉用户的手指所做的交互。随着移动网络的发展，其能够支持越来越复杂的应用，web开发者需要一种方法...
触摸事件(touchstart、touchmove和touchend)
weixin_42349568的博客
10-23 2万+
触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。下面具体说明： 　　touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 　　touchmove事件：当手指在屏幕上滑动的时候连续地触发。 　　touchend事件：当手指从屏幕上离开的时候触发。 除了常见的DOM属性，触摸事件还包含下面三个用于跟踪触摸的属性。也就是存在于事件的默认参数event中。 　　touches：表示当前跟踪的触摸操作的touch对象的数组。
HTML5触摸事件(touchstart、touchmove和touchend)
热门推荐
fuqinyijiu的专栏
11-20 22万+
HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。 　　一开始触摸事件touchstart、touchmove和touchend是iOs版Safari浏览器为了向开发人员
js移动端点击事件 ：touchstart + touchend
paopaosama的博客
09-04 3976
js移动端点击事件封装函数： 移动端的手指事件，与电脑短的点击onclick是不一样的。 移动端事件有： touchstart 手指按下 touchend手指抬起 二者组合起来才是一个完整的“点击”事件。 但是手指按下和抬起的移动距离如果过大，就不是点击，而是滑动了；因此要限定手指按下和手指抬起的一个距离。 分析完毕，直接上代码： //先定义一个新事件名称，如tap var ...
touch事件解析
qq_32550037的博客
09-20 759
touch事件解析 touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。touchend事件：当手指从屏幕上离开的时候触发。touchcancel事件：当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具
javaScript -- touch事件详解（touchstart、touchmove和touchend）
删库跑路
06-27 4万+
HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。一开始触摸事件touchstart、touchmove和touchend是iOS版Safari浏览器为了向开发人员传达一些信息新
由于touchend事件在滑动时也会被触发，引起了误操作
筑释科长的博客
08-14 1846
问题：在列表里运用touchend事件，当手指在列表上滑动时，也会触发列表元素上的touchend事件 方案一： /*仅适用于内容中点击元素。对于拖动等元素，需要自行在页面处理。 * 主要是绑定touchstart和touchmove事件，并判断用户按下之后手指移动了多少像素。 * 如果手指移动距离小于10像素，则还是认为用户在做点击操作。如果移动距离超过了10像素，则取消后续事件监听函数的执...
彻底解决低端安卓手机touchend事件不触发（考虑scroll）
weixin_33845477的博客
08-13 331
本次移动端开发时遇见了安卓4.2系统不能触发touchend的问题，有以下需求。 1. 横滑轮播图 2.下拉刷新页面内容 3.body滚动条不能失效 开始在轮播图touchmove事件中阻止了浏览器默认行为，此时touchend事件可以触发。 ／／拖拽轮播图 parentNode.addEventListener('touchmove',function(e) { ...
触摸事件中touchstar、touchmove、touchend、touchcancel事件应用方法及实例
06-06
在移动端开发中，触摸事件是非常常见的一种事件，而其中最常用的就是touchstart、touchmove、touchend、touchcancel事件。 1. touchstart事件 当手指触摸屏幕时，会触发touchstart事件。touchstart事件触发后，会返回一个TouchEvent对象，其中包含了一些关于触摸点的信息，如触摸点的坐标、触摸点的标识符等。 以下是一个touchstart事件的实例： ```javascript document.addEventListener('touchstart', function(event) { console.log('触摸点的坐标：', event.touches[0].clientX, event.touches[0].clientY); }); ``` 2. touchmove事件 当手指在屏幕上移动时，会触发touchmove事件。和touchstart事件一样，touchmove事件也会返回一个TouchEvent对象，其中包含了关于移动后触摸点的信息。 以下是一个touchmove事件的实例： ```javascript document.addEventListener('touchmove', function(event) { console.log('移动后触摸点的坐标：', event.touches[0].clientX, event.touches[0].clientY); }); ``` 3. touchend事件 当手指离开屏幕时，会触发touchend事件。touchend事件同样会返回一个TouchEvent对象，其中包含了关于离开屏幕后的触摸点信息。 以下是一个touchend事件的实例： ```javascript document.addEventListener('touchend', function(event) { console.log('离开屏幕后的触摸点的坐标：', event.changedTouches[0].clientX, event.changedTouches[0].clientY); }); ``` 4. touchcancel事件 当由于某些原因（如系统中断）触摸事件被取消时，会触发touchcancel事件。touchcancel事件同样会返回一个TouchEvent对象，其中包含了关于取消前的触摸点信息。 以下是一个touchcancel事件的实例： ```javascript document.addEventListener('touchcancel', function(event) { console.log('取消前的触摸点的坐标：', event.touches[0].clientX, event.touches[0].clientY); }); ``` 以上就是touchstart、touchmove、touchend、touchcancel事件的应用方法及实例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值