开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

触发器“touchstart”在setTimeout内不起作用

触发器"touchstart"是一个移动端的触摸事件，用于在用户触摸屏幕时触发相应的操作。而setTimeout是JavaScript中的一个定时器函数，用于在指定的时间后执行一段代码。

在setTimeout内使用"touchstart"触发器可能不起作用的原因是，"touchstart"事件通常是与用户的实际触摸操作相关联的，而setTimeout是在指定的时间间隔后执行代码，不会与用户的实际触摸操作同步。

解决这个问题的方法是使用其他适合的事件来替代"touchstart"，或者使用其他方法来实现需要的功能。例如，可以考虑使用"click"事件来替代"touchstart"，或者使用其他的定时器函数，如setInterval，来实现需要的延时操作。

腾讯云提供了丰富的云计算产品和服务，其中与前端开发相关的产品包括云函数（Serverless）、云开发（CloudBase）、CDN加速等。与后端开发相关的产品包括云服务器（CVM）、容器服务（TKE）、云原生应用平台（TKE Serverless Kubernetes）等。具体产品介绍和链接地址可以参考腾讯云官方网站。

相关搜索:在settimeout角度内添加延迟 setTimeout函数内的JQuery If块不起作用 2 Promise内的SetTimeOut方法不起作用 addClass和removeClass jQuery问题(SetTimeout在循环内不起作用)touchstart在画布中不起作用(在模式下)jquery touchstart在android设备上不起作用 Touchstart和Touchend在移动设备上不起作用 setTimeout在eventlistener中不起作用 Jquery .removeClass在setTimeout中不起作用 console.log('\n')；在for循环内的setTimeout之后 SetTimeout在chrome代码段中不起作用 setTimeout()在动画函数中不起作用|动画不起作用移动设备上的多级菜单，在链接内的图标上使用touchstart 在setTimeout() nodejs中，socket.emit不起作用 require函数在方法内的函数内不起作用倒计时计时器在函数(setTimeout(){ ... })内不工作在组件内滚动列表不起作用列表参数在函数内不起作用 Python函数在循环内不起作用 MaxRow触发器在mysql中不起作用

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

前端-用 Vue 编写一个长按指令

启动函数这个函数包括一个 setTimeout，它是 JavaScript 中的一个基本方法，允许在特定时间之后执行一个函数。注意，click 事件执行的过程中，会触发另外两个事件。...== 0) { return; } // 在启动一个定时器之前确保没有正在运行的计时器 if (pressTimer === null) { pressTimer = setTimeout...设置触发器剩下的就是将事件监听器添加到想要长按效果的按钮上。...因此，我们添加了 touchstart、touchend 和 touchcancel 事件监听器。...binding.value(e) } // 添加事件监听器 el.addEventListener("mousedown", start); el.addEventListener("touchstart

2.3K4 0

【移动端】touch事件及穿透事件

bug收集：专门解决与收集bug的网站网址：www.bugshouji.com touch 事件的来历 2007 苹果推出iphone，浏览器网页在iphone上显示时字体特别小，根本看不清楚...苹果的解决方案：方案一：双指进行缩放方案二：在屏幕上双击进行放大（单击300ms后，再单击才算双击），造成了，移动端点击事件，300ms 延迟的问题解决方案，就是使用touch事件来替代移动端新增...false); document.addEventListener( 'touchcancel', function () { console.log( 'touchcancel'); , false); setTimeout...' : t = setTimeout( function () { callback.call(...e.changedTouches[o]); }); $('#box' ).longtap( function (e) { console.log(e); ); 5. touch 事件的穿透因click是在touch

2.1K1 0

解决ios不支持按钮:active伪类的方法

mozilla开发社区上有 :active 不起作用的答案： [1] By default, Safari Mobile does not use the :active state unless there...is a touchstart event handler on the relevant element or on the ....在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。...document.body.addEventListener('touchstart', function () { //...空函数即可 }); 将上述事件监听代码加上后，Safari Mobile

1.3K7 0

uniapp实现小程序页面自由拖拽组件

2.movable-area + movable-view movable-area组件的作用是定义一个区域，在这个区域内的movable-view的组件可以被用户自由的移动，同时movable-view...根据组件定义，可以想到它的使用场景大概是在页面局部区域内对一些元素拖拽缩放，这个与我们想要的在整个页面进行自由拖拽的需求不符。...flag) { flag = true setTimeout(() => {...this.isPlay) { this.isPlay = true ins.play() setTimeout...页面点击穿透问题注意wxs中touchmove方法最后返回false，代表不往上冒泡，相当于同时调用了stopPropagation和preventDefault，这个不能省略限定屏幕内拖拽要限定在屏幕内滑动

1.2K2 0

Vue使用定时器修改属性，a-modal无法弹出的解决方法

今天负责对接口的同事找到我说， setTimeout() 定时器修改 modal 绑定的属性值后，无法正常显示弹窗。...下面的他的部分代码： HTML： touchstart="gotouchstart(item.id)" @touchmove="gotouchmove.../执行长按要执行的内容， this.DeleteId = id; this.DeleteSt = true; },1000);//这里设置定时 }, //手释放，如果在2000毫秒内就释放...在 gotouchstart() 方法内，let 了一个 that ，设置了一个定时器，2秒后执行修改 DeleteSt 属性的值，当值为 true 时，弹窗会弹出，但是不管怎么按，都不显示弹窗。... //执行长按要执行的内容， that.DeleteId = id; that.DeleteSt = true; },1000);//这里设置定时 }, 修改了一下，将定时器内的

2.9K3 0

开发一个Canvas小游戏实现一个游戏“引擎”

小球在一直的往下走，但是要保证小球还能在屏幕的中间可见区域，那么就给画布做一个 Y 轴的负偏移。...* 渲染器、照相机、场景这三个是要配合在一起使用，渲染出照相机范围内的场景（一个个的实体）。...这种场景在JS中我们一般会想到 setInterval, setTimeout 等；实际再写游戏、动画的时候都是用到 requestAnimationFrame这个API的，这里浅浅的讲一下他们的区别。...setInterval 与 setTimeout这两个的概念其实是差不多的，都是浏览器JS引擎提供的方法，无非就是用 setTimeout 要做一个递归逻辑。...requestAnimationFramerequestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，而且重绘或回流的时间是跟着显示器的刷新率来的，这样无论在高刷还是低刷的屏幕上都能有很好的体验

4711 0

html5 判断是点击还是长按

在移动端尤其是微信浏览器中，长按有一个功能是识别二维码或者是弹出复制文字的浮层，但是有时候我们不想让他弹出来，于是会采用禁止默认事件的方式来写，那么问题来了，点击事件也就不生效了。...于是可以采用另一种方法来实现它在移动端有一个事件为touch事件，分为touchstart、touchend和touchmove。...具体思路就是有一个延时器，在touchstart设置执行，延时器开始执行，touchend和touchmove事件触发时执行clearTimeout，将延时器清除。...具体代码情况下方 var timeOutEvent = null; $("#touchArea").on({ touchstart:function(e){ timeOutEvent = setTimeout

1.9K2 0

如何实现一个丝滑的点击水波效果

先看看touchstart事件的处理方法createRipple： function createRipple(this: RippleHTMLElement, event: TouchEvent) {...200ms结束，如果我们在60ms内进行第二次点击不会创建第二个水波，因为前一个水波任务还未执行，如果是在60ms后第二次点击，会先调用removeRipplie移除上一个水波，然后重复第一个水波的创建流程...接下来会创建一个60ms的定时器，等待执行createRipple的task，如果我们在60ms内就松开了手指，那么又会执行removeRipple方法，此时_ripple.tasker存在，所以removeRipple...的task方法也会等待60ms再执行；如果我们是在60ms后才松开手指，那么_ripple.tasker不存在，会立即执行removeRipple的task方法，该方法内会获取最后一个水波元素，也就是刚刚创建的水波元素...在目标元素被卸载时会执行unmounted方法： function unmounted(el: RippleHTMLElement) { el.removeEventListener('touchstart

6082 0

网页|利用touch实现下拉刷新

1功能介绍下拉刷新在常见的手机app上大多都有运用。下拉刷新即向下拉重新加载、刷新。...图1 整体效果图 2下拉刷新的实现原理在实现下拉刷新的过程中会用到touch事件。其中，touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。...touchcancel事件：当系统停止跟踪触摸的时候触发监听原生touchstart事件，记录其初始位置的值，并监听原生touchmove事件，记录并计算当前滑动的位置值与初始位置值的差值，大于0表示向下拉动...touchend(Y,newY){ var distance = newY -Y; if(distance>20){ //bai用来设置或获取位于对象起始和结du束标签内的...text').innerHTML= "正在刷新"; document.getElementById('move').innerHTML="" setTimeout

1.7K2 0

JS篇(028)-移动端 click 事件、touch 事件、tap 事件的区别

参考答案： 1.click 事件在移动端会有 200-300ms 的延迟，主要原因是苹果手机在设计时，考虑到用户在浏览网页时需要放大，所以，在用户点击的 200-300ms 之后，才触发 click，...其中包括：touchstart, touchmove, touchend, touchcancel 这四个事件，touchstart touchmove touchend 事件可以类比于 mousedown...控制允许延迟的时间 delayTime = 200, // 记录是否移动，如果移动，则不触发tap事件 isMove = false; // 在touchstart...触发，这个元素就会 display: none，而从上面的 tap 可以看出，有 touchstart、touchend，所以会 300ms 之后触发 click 事件，而 z-index 已经消失了...tap(ele, function() { setTimeout(function() { ele.style.display = "none"; }, 300); })

6.6K4 0

基于vue封装的移动端swiper组件

div class="carousel" ref="carousel">

</slot...translate3d(-${this.swiperWidth}px, 0, 0)`; // panels.firstChild.classList.add("active"); // 在刚页面加载完成的时候...$refs.poins.firstChild.classList.add("active"); this.init(); }); }, methods: { touchStart...$panels.style.transform = `translate3d(${position}px, 0, 0)`; setTimeout(() => { this.

6312 0

超小Web手势库AlloyFinger原理(转载)

目前AlloyFinger作为腾讯手机QQ web手势解决方案，在各大项目中都发挥着作用。...感兴趣的同学可以去Github看看： https://github.com/AlloyTeam/AlloyFinger 在腾讯，如：兴趣部落、QQ群、QQ动漫、腾讯学院、TEDxTencent、 AlloyTeam...仅仅只有Vector2和AlloyFinger，在touchstart、touchmove、touchend是可以trigger出相关的手势事件的，简单、直接！...touchstart开启一个750毫秒的settimeout，如果750ms内有touchmove或者touchend都会清除掉该定时器。...这个scale会挂载在event上，让用户反馈给dom的transform或者其他元素的scale属性。 rotate旋转 ? 如上图所示，利用内积，可以求出两次手势状态之间的夹角θ。

1.1K2 0

Canvas初实现拍照小游戏

由于实现的比较简单，且在部分机型上会出现点小问题，此处仅作为js代码的记录，暂不打算写相关教程。代码会在项目结束后公布。...while(1){ if(pic[i].id==name){ return pic[i].src; } i++; } } }; /* * touchstart...imageReady =false; } /* * touchend执行函数 * */ function eventUp(){ canvas.removeEventListener('touchstart...(function(){ setTimeout( update, 1000/30); },500); /* if(sEnd==1){ setTimeout(function...css("top","0%"); ctx =canvas.getContext("2d"); //取消拍照点击事件 canvas.removeEventListener('touchstart

1K2 0

微信开发给网页页面添加背景音乐

在微信开发中，单纯的页面展示并不能够吸引客户的眼球，需要有视觉和听觉的双重效果，才能够吸引住客户浏览，达到产品宣传的目的，前面说过很多页面的特效，今天我来说一种听觉上的效果，就是加上背景音乐，如何能够吸引住客户...= basePath + mp3snd; this.aud.loop = "loop"; this.aud.load(); setTimeout...bdBtn : function(_DOM){/* 暂停的操作 */ $(_DOM).attr("status",'1'); $("div").delegate(_DOM, "touchstart...，但是在pc端就会使鼠标点击失效。...function () { /* 初始化 */ audios.play(); audios.bdBtn(".music");/* 点击的区域 */ }); 这段js代码你可以将其封装成一个js文件，然后在html

6844 0

Vue 编写一个长按指令插件

如何编写 Vue 插件在以往的 Vue 项目开发过程中，我们使用插件的方法是Vue.use(plugin)。如： import filters from "....binding, vnode, oldVnode) { }, }) 复制代码此次长按指令我们只用到了bind()函数分析长按功能实现监听 mousedown 和 mouseout (移动端为 touchstart...== 0) { return; } if (pressTimer === null) { pressTimer = setTimeout(() => { // 执行函数...0) { return; } if (pressTimer === null) { pressTimer = setTimeout...// 添加事件监听器 el.addEventListener("mousedown", start); el.addEventListener("touchstart

1.2K1 0

Vue 2.x 移动端长按事件实现方式

原来是在 pc 端右键菜单不能出现了，我一看原来是没有兼容移动端的事件，因为在 pc 端我们只需要使用 @contextmenu 这个事件就可以实现右键菜单的出现了，当然在此之前我们需要实现一个菜单组件..., groupIndex) { clearTimeout(this.loop) //再次清空定时器，防止重复注册定时器 let that = this this.loop = setTimeout...接下来就是总结总结在vue中长按事件并没有封装，在使用的时候需要我们自己取写一个方法获取长按事件。...方法一：使用@touchstart，@touchend start () { clearTimeout(this.loop); //再次清空定时器，防止重复注册定时器 this.loop...= setTimeout(() => { console.log("长按了"); }, 1000); }, end () { clearTimeout(this.loop

1.3K3 0

vue实现城市列表选择

成果展示最后的成果就是下面所展示的内容，因为gif图没有做，只能截图所展示，接下来，会带着大家一步一步的完成下面功能，脚手架搭建和node安装在本次案例不会讲解，如果了解，可以在我的博客园找到有详细介绍...清空 this.listItem = "" return } this.timer = setTimeout...$emit事件，子组件在触发的事件传递给父组件，父组件通过子组件传递的事件，在传递给List组件， <li class...= true }, handleTouchMove (e) { // 手指移动 if(this.touchstart)...this.timer) { clearInterval(this.timer) } this.timer = setTimeout

2.6K2 0

10-移动端开发教程-移动端事件

2.1 touch事件与click事件同时触发在很多情况下，触摸事件和鼠标事件会同时被触发（目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作）。...因为双击缩放检测的存在，在移动设备屏幕上点击操作的事件执行顺序： touchstart(瞬间触发) → touchend → click(200-300ms延迟) 如果你使用了触摸事件，可以调用 event.preventDefault...(e) { console.log('touchstart'); }); 2.3 touchmove事件当用户在触摸屏上移动触点(手指)的时候，触发这个事件..." : //500ms之后执行 timerId = setTimeout(function (){...移动端点击穿透问题如果某个返回按钮的位置，恰好在要返回的这个页面的带有href属性的a标签的范围内，在点击返回按钮后，页面快速切换到有a标签的页面，300ms后触发了click事件，从而触发了a标签的意外跳转

6.8K8 0

10-移动端开发教程-移动端事件

2.1 touch事件与click事件同时触发在很多情况下，触摸事件和鼠标事件会同时被触发（目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作）。...因为双击缩放检测的存在，在移动设备屏幕上点击操作的事件执行顺序： touchstart(瞬间触发) → touchend → click(200-300ms延迟) 如果你使用了触摸事件，可以调用 event.preventDefault...(e) { console.log('touchstart'); }); 2.3 touchmove事件当用户在触摸屏上移动触点(手指)的时候，触发这个事件..." : //500ms之后执行 timerId = setTimeout(function (){...移动端点击穿透问题如果某个返回按钮的位置，恰好在要返回的这个页面的带有href属性的a标签的范围内，在点击返回按钮后，页面快速切换到有a标签的页面，300ms后触发了click事件，从而触发了a标签的意外跳转

6.4K7 0

读Zepto源码之Touch模块

isPointerType $(document) .bind('MSGestureEnd', function(e){ ... }) .on('touchstart...on('touchstart MSPointerDown pointerdown', function(e){ ......start on('touchstart MSPointerDown pointerdown', function(e){ if((_isPointerType = isPointerEventType...这里同样用了 setTimeout 异步触发事件。...因为在 scroll 的时候，肯定是只想响应滚动的事件，异步触发是为了在 scroll 的过程中和外界调用 cancelTouch 方法时，可以将事件取消。

9310 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭