移动端有时候触发不了touchend 使用event.preventDefault()后页面无法滚动

最新推荐文章于 2024-05-11 14:37:58 发布
原创 最新推荐文章于 2024-05-11 14:37:58 发布 · 2.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js #uni-app

在移动端开发中，遇到touchend事件有时无法触发的问题。为解决此问题，通常会使用event.preventDefault()阻止默认行为，但这同时也阻止了页面滚动。文章介绍了touchcancel和touchend事件的区别，并提出了解决方案：将两个事件绑定到同一处理方法，避免阻止页面滚动的同时确保能监听到手指抬起事件。
  • 使用移动端设备监听手指触摸事件时发现有时候无法触发touchend事件，因此在监听touchend事件时通过 阻止页面默认事件 event.preventDefault()来实现事件监听，但是发现页面的滚动事件也被阻止了。怎么样既不会阻止页面滚动又可以监听手指抬起事件？
  • 通过查看资料发现元素上绑定了touchcancel和touchend两个事件：
    1、长按后不移动直接抬起手指，触发的是touchcancel；
    2、长按后轻轻移动一下再抬起手指，触发的是touchend；
  • 针对这细微的变化实际上用户很难去辨别，因此给元素这两个事件绑定同一个方法，此时不再需要阻止页面默认事件也可以触发手指抬起动作：
<div
    class="chat"
    id="chat"    
    @touchcancel="handleTouchEnd" 
    @touchend="handleTouchEnd"
  ></div>
移动端事件穿透的原理与解决方案.docx
10-26
### 移动端事件穿透的原理与解决方案 随着移动设备的普及和技术的发展，移动互联网迎来了前所未的高度发展期，这也促使越来越多的开发者投入到移动应用的开发之中。而在移动应用的开发过程中，一个常见的问题是...
vue中touch和click共存的解决方式
11-20
这个问题通常出现在需要同时响应触摸和点击操作的场景，例如城市选择页面的字母滑动，其中`touch`事件用于滚动，而`click`事件用于选择。 ### touchstart与click的冲突 当一个元素同时绑定了`touchstart`和`click`...
解决h5在移动端touchend事件不灵敏的问题-hammer.js
qq_44428688的博客
05-11 1029
如题 在h5页面尝试过程中发现移动端的touchend触摸结束无法正常生效，故而寻找了插件自定义了vue指令已实现需求效果。定义了自定义指令就需要在main.js进行引入，引入代码如下（此为自己本地的路径 具体路径看xxx.js新建在何处）全局注册了指令便可以使用了 使用和普通vue指令一样。本封装方法指令的绑定的是处理事件的方法。在项目中定义xxx.js文件，在文件中引入hammer.js。然后写对应的逻辑代码 xxx.js全部代码如下。首先在项目中安装如下插件。hammer.js 扩展。
移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法...
04-09 1320
这两天自己在写一个手机网页，用到了触屏滑动的特效，就是往右滑动的时候左侧隐藏的菜单从左边划出来。 做完之后在手机原生浏览器中运行正常，但在QQ和微信中打开，发现touchmove只会触发一次，而且touchend也经常不触发。 之后百度了一下这个问题，原因是 主要是由于200ms超时导致内核不一定会一直处理touchmove事件，一旦超时会将后续所有的事件转交给UI处理，导致tou...
【 H5踩坑 】Dom变更引起的 touchend 不触发
weixin_33701564的博客
07-24 631
背景故事 几个月前小编接了一个 全屏阻止touch默认行为，并模拟滚动 的需求。 但事成之后，偶尔出现 “突然锁死” 的问题，无法进行任何滑动。 问题原因 几经排查，是我们设计的 “单指锁定” 模块引起的。 为了更好的体验，我们做了一个“单指锁定”模块，当上一个手指不放开时，另一个手指不论怎么滑也不会引起交互。 因此如果 由于某种情况 导致 touc...
微信小程序，touchend不触发的解决方法
y523648的博客
06-08 2876
1. 分别定义按下和离开的样式，用hover-class代替touchstart和touchend，图片用background-img显示。分别将 backIcon 和 touchbackIcon 里的 background-img定义为离开和按下时需要显示的图片。但是这有个问题，background-img如果要显示本地图片，需要使用base64格式，这会导致样式表里显示一长串字符。分别在手指按下和离开时，显示不同的图片。比如，不点击时显示图片A，手指按下时显示图片B，手指抬起再显示回图片A。
移动端touchend事件不触发解决方案
Jartto's Blog
06-25 3105
移动端touchend事件不触发，需要在touchstart中加入：1e.preventDefault(); 但是问题来了，阻止默认事件后，页面原先的滚动条也无法滚动了。 查阅了资料，在stackoverflow上得到如下解释： To workaround this bug you have to call preventDefault() on either the...
为什么有时候touchend不会触发
04-01
根据规范，如果触发了touchmove，某些浏览器可能不会触发touchend，特别是当滚动发生的时候。这时候需要确认是否在touchstart或touchmove中有阻止默认行为，比如调用了preventDefault()，这可能会影响后续事件的触发...
// useHandleEvent.js import { ref, onMounted, onUnmounted } from "vue" interface EventType { type: "click" | "dblclick" | "longclick" cell: { row: number; col: number; element: any } originalEvent: MouseEvent | TouchEvent | any } export function useHandleEvent(containerRef: Ref<HTMLElement>, callback: (cb: EventType) => void) { const touchInfo = ref<{ startX: number startY: number startTime: number target: any } | null>(null) const isMobile = ref(false) const lastClickInfo = ref({ time: 0, target: null as any }) const longPressTimer = ref<NodeJS.Timeout | null>(null) const isLongPress = ref(false) const detectMobile = () => { return ( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1) ) } // 获取事件单元格信息 const getCellFromEvent = (event: any) => { if (!event) return null let target = event.target while (target && target !== containerRef.value) { if (target.dataset?.row !== undefined && target.dataset?.col !== undefined) { return { row: parseInt(target.dataset.row), col: parseInt(target.dataset.col), element: target } } target = target.parentNode } return null } // 触发回调的统一方法 const triggerCallback = (type: "click" | "dblclick" | "longclick", cell: any, event: any) => { const resData = { type, cell, originalEvent: event } return callback(resData) } // 处理鼠标按下事件 const handleMouseDown = (event: MouseEvent) => { // 阻止右键菜单 if (event.button === 2 || event.button === 3) { event.preventDefault() return } const cell = getCellFromEvent(event) if (!cell) return // 设置长按定时器 longPressTimer.value = setTimeout(() => { isLongPress.value = true triggerCallback("longclick", cell, event) }, 500) } // 处理鼠标抬起事件 const handleMouseUp = (event: MouseEvent) => { if (longPressTimer.value) { clearTimeout(longPressTimer.value) longPressTimer.value = null } if (isLongPress.value) { isLongPress.value = false return } const cell = getCellFromEvent(event) if (!cell) return const now = Date.now() if (lastClickInfo.value.target === cell && now - lastClickInfo.value.time < 300) { triggerCallback("dblclick", cell, event) lastClickInfo.value = { time: 0, target: null } } else { triggerCallback("click", cell, event) lastClickInfo.value = { time: now, target: cell } } } // 处理触摸开始事件 const handleTouchStart = (event: TouchEvent) => { if (event.touches.length > 1) return const touch = event.touches[0] const cell = getCellFromEvent(event) if (!cell) return touchInfo.value = { startX: touch.clientX, startY: touch.clientY, startTime: Date.now(), target: cell } longPressTimer.value = setTimeout(() => { event.preventDefault() isLongPress.value = true triggerCallback("longclick", cell, event) }, 500) } // 处理触摸结束事件 const handleTouchEnd = (event: TouchEvent) => { if (longPressTimer.value) { clearTimeout(longPressTimer.value) longPressTimer.value = null } if (!touchInfo.value) return if (isLongPress.value) { isLongPress.value = false touchInfo.value = null return } const touch = event.changedTouches[0] const cell = getCellFromEvent(touch) if (!cell || cell !== touchInfo.value.target) { touchInfo.value = null return } const moveDistance = Math.sqrt( Math.pow(touch.clientX - touchInfo.value.startX, 2) + Math.pow(touch.clientY - touchInfo.value.startY, 2) ) if (moveDistance < 10) { const now = Date.now() if (lastClickInfo.value.target === cell && now - lastClickInfo.value.time < 300) { triggerCallback("dblclick", cell, event) lastClickInfo.value = { time: 0, target: null } } else { triggerCallback("click", cell, event) lastClickInfo.value = { time: now, target: cell } } } touchInfo.value = null } // 阻止默认的右键菜单行为 const handleContextMenu = (event: MouseEvent) => { event.preventDefault() } // 鼠标移出时清除长按状态 const handleMouseLeave = () => { if (longPressTimer.value) { clearTimeout(longPressTimer.value) longPressTimer.value = null } isLongPress.value = false } onMounted(() => { if (!containerRef.value) return isMobile.value = detectMobile() containerRef.value.addEventListener("mousedown", handleMouseDown) containerRef.value.addEventListener("mouseup", handleMouseUp) containerRef.value.addEventListener("mouseleave", handleMouseLeave) containerRef.value.addEventListener("contextmenu", handleContextMenu) containerRef.value.addEventListener("touchstart", handleTouchStart, { passive: true }) containerRef.value.addEventListener("touchend", handleTouchEnd, { passive: true }) }) onUnmounted(() => { if (!containerRef.value) return containerRef.value.removeEventListener("mousedown", handleMouseDown) containerRef.value.removeEventListener("mouseup", handleMouseUp) containerRef.value.removeEventListener("mouseleave", handleMouseLeave) containerRef.value.removeEventListener("contextmenu", handleContextMenu) containerRef.value.removeEventListener("touchstart", handleTouchStart) containerRef.value.removeEventListener("touchend", handleTouchEnd) if (longPressTimer.value) clearTimeout(longPressTimer.value) }) return { isMobile } } 请根据这段代码进行优化，在PC端和移动端统一都只返回按下down，弹起up，单击click，双击dblclick和长按longclick 5种事件，其他的都阻止屏蔽，请确保能准确区分识别单击，双击和长按事件
最新发布
08-06
在handleMouseUp和handleTouchEnd中，在清除长按定时器之后，触发'up'事件（注意：长按事件触发后，isLongPress为true，此时不触发单击和双击，但up事件仍然触发）。 4. 在触发单击和双击事件之前，需要检查是否...
jQuery -- touch事件 touchend失效解决方案
热门推荐
删库跑路
06-27 1万+
在使用touch事件是会出现touchstart后touchend不执行的问题这时候只需要加一行代码即可：$("body").on("touchstart", function(e) { e.preventDefault(); });但是有人在谷歌浏览器或许会发现报错，这时候换成下面这行代码就可以解决：$("body").on("touchstart", function(e) {
cocos creator的touch_end事件监听不生效，有可能是什么原因？
weixin_35756637的博客
01-23 914
Cocos Creator 的 touch_end 事件监听不生效可能是因为节点没有设置为可点击状态，或者是脚本没有绑定到该节点上。另外，事件监听器的名称必须为 "touch_end"，大小写敏感。建议检查节点设置、脚本绑定、事件监听器名称等问题。 ...
解决部分安卓touchend不触发问题
点点的博客
02-27 9489
问题描述： js的触屏事件，主要有三个事件：touchstart，touchmove，touchend。 这三个事件最重要的属性是 pageX和 pageY，表示X坐标，Y坐标。 touchstart=在触摸开始时触发事件 touchend=在触摸结束时触发事件 touchmove=这个事件比较奇怪，按道理在触摸到过程中不断激发这个事件才对，但是在我的 Android 中，在 touchstart...
vue中touchend 没有触发_给手机端页面留一个调试后门吧(vue)
weixin_39859988的博客
11-25 833
当我们在浏览器开发vue页面时，由于浏览器对于调试有天然的支持，我们开发起来很方便。但是现在已经进入了移动端时代，移动端页面的需求越来越大。在开发移动端页面的时候我们通常是在浏览器完成开发完成，之后才在手机端测试，如果测试出现问题还得重新回到浏览器上寻找错误。甚至还有嵌入在APP的页面，经过调试之后还要重新发包。当然还有更加奇怪的现象，由于手机浏览器和Web浏览器的差异，经常会发现在Web浏览器上...
移动端touchmove事件边界touchend不触发
qjl_0805的博客
06-28 7537
做前端一年整，碰到不少问题，以前都是找资源，解决问题，不会去分享资源，这次是我第一次写博客，如果有什么问题，欢迎来交流。 在过去一年的时间里，我所接触的多有是移动端的项目，移动前端中，touch触摸事件经常会涉及到，轮播图，上拉加载，都要用到touch事件，有用过插件，也有自己写过一些事件。关于touch事件中关键的3个事件 touchstart, touchmove, touchend
移动端开发touchmove事件preventDefault引发页面不能滚动问题
AlexS Blog
03-07 1万+
项目中，用到了一个可在页面中的拖拽小图标，由于拖动过程中不能引发页面的拖动@touchmove事件对应函数中加入： document.addEventListener("touchmove",this.preventDefault,false); preventDefault(e) { e.preventDefault(); } 但实际拖动之后，发现长页面上下也无法拖动...
禁止Safari 页面滚动问题（event.preventDefault无效的问题）
GrimRaider的专栏
07-04 2272
1.设置监听（addEventListener）的对象不是你要preventDefault的对象，我就是这种情况，使用全局document.addEventListener，产生滚动的是body下的一个子。 2.event.cancelable为false，则event.preventDefault无效。 参考： http://www.w3school.com.cn/jsref/event_...
iScroll左右滑动的时候，阻止了内容的上下滑动 e.preventDefault() 解决办法
小郭书房
04-24 5895
很不错的一个框架！不过此框架会阻止浏览器的默认行为，如左右滑动的时候，这个时候会阻止上下滑动 这样对很多文章内容页相对较长的页面显然不适用，修改如下 1:在onBeforeScrollStart: function (e) { e.preventDefault(); }, 修改为onBeforeScrollStart: null, 2:在_move方法里增加（大小可根据需要自行修
cocos2dx EventListenerTouchOneByOne move函数与end函数不生效（无反应）lua
子不语
04-11 2414
beginFunc需要返回true function addTouchEvent(node, beginFunc, moveFunc, endFunc) local listener = cc.EventListenerTouchOneByOne:create() listener:registerScriptHandler(beginFunc, cc.Handler.EVENT_TOUCH_BEGAN) --这里的beginFunc要返回true！！！！！！ listen.
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值