关于click与touchstart事件切换问题

最新推荐文章于 2023-02-15 15:03:10 发布
最新推荐文章于 2023-02-15 15:03:10 发布
阅读量275 收藏
点赞数
文章标签： js javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54572778/article/details/115795027
版权

今天在写项目的时候遇到了一个费解的问题，需要通过点击或者触摸事件来改变一个img标签的src值来完成点击切换图片，在次点击在切换回去的一个效果，实现的效果很简单代码也很简单，但是就是在切换回去的时候会出现问题，一开始我写的代码为：

在这里插入图片描述

代码很简单就是通过判断img的src来切换图片，但是每次切换回去的时候总是不行，根本进不到else里面
改了很多办法都不行，到最后在网上查到了这个

在这里插入图片描述
这个方法好像是用match（）来查一段字符串，如果有就执行，否则就执行else
这个方法就可以实现，不知道为什么，第一段代码我也认为没有错误可就是不行，哪个大佬知道可以解释一下，多谢！

阎涛0329
关注
点击click事件在iPad没有响应
csr0312的专栏
08-19 5686
本来在ipad使用tap事件，工作的很好。但是需求改变，要适应PC跟ipad，所以索性直接替换zepto改成jquery。理想不错，但是现实是，在浏览器上click事件工作得很好，切换到模拟器上面，也运行不错，但是切换到真机ipad上面，悲剧了，根本不响应click事件。查看了一遍又输出，还是木有反应。急了，只能求助谷歌了，click no action in pad 第一条出来的就是stackov
HTML5滑动(swipe)事件,移动端触摸（touch）事件
weixin_36381252的博客
06-09 4025
目有个交互需要实现手指滑动的交互，pc端使用mousedown,mousemove,mouseup监听实现。但在ios设备上mousemove是不好监听的，同类的方法是touchstart,touchmove,touchend。项目需求，需要用到拖动事件。由于不需要考虑IE8等低端浏览器的兼容性， 所以想到HTML5中的drag事件， 发现移动端android & IOS并不支持dra...
JS中touchstart事件与click事件冲突的解决方法
11-29
前言 移动互联网是未来的发展趋势，现在国内很多互联网大佬都在争取移动这一块大饼，如微信及支付宝是目前比较成功的例子，当然还有各种APP和web运用。 下面这篇文章主要介绍了关于JS中touchstart事件与click事件冲突解决的相关内容，下面话不多说了，来一起看看详细的介绍吧。 一 · 业务场景的描述 在对已完成的PC站点进行移动端适配时，我们想要站点在移动设备上有更快的响应速度，以带给用户更好的体验，此时，我们应该使用移动设备专用的事件系统，例如，使用 touchstart 事件代替 click 事件。 为什么这样效果会更好呢？根据Google开发者文档中的描述： 移动设备上的浏览器将
click事件，同一位置切换两个图标
java_zhaoyanli的专栏
12-28 1776
1，可能最简单的就是toggle,但是这个属性只有是jquery.1.8.1.js才可以用，右局限性。 2，用click实现：点一下显示下拉内容，再点一下消失 $('.vdts-left-bottom .select').click(function() { var statebox = $('.optionbox').css('display'); if(statebox
JS中touchstart事件与click事件冲突的解决方法.docx
01-21
JS中touchstart事件与click事件冲突的解决方法.docx
移动端touchstart、touchend触摸事件的简单使用
xuxinwen32的博客
12-11 3722
移动端touchstart、touchend触摸事件的简单使用
touchstart与click同时触发
马优晨
06-25 9451
产生冲突的原因 我们可以给某个元素同时绑定 touchstart 和 click 事件，但这将会导致本篇文章解决的问题 – 这两个事件在移动设备上会发生冲突。 由于移动设备能够同时识别 touchstart 和 click 事件，因此当用户点击目标元素时，绑定在目标元素上的 touchstart 事件与 click 事件（约300ms后）会依次被触发，也就是说，我们所绑定的回调函数会被执行两次！。...
Passive Event Listeners - 被动事件监听器1
08-08
被动事件监听器（Passive Event Listeners）是现代Web开发中的一个重要优化策略，尤其是在构建高性能的Web应用程序时。这个概念的引入主要是为了提高页面的滚动性能和响应速度，特别是对于移动设备上的触摸事件。...
相册切换特效特效代码
03-20
- **JavaScript 事件处理**：通过监听`click`、`mouseover`或`touchstart`等事件，可以触发相册的切换动作。 - **图片懒加载**：为了提高性能和用户体验，可能采用了图片懒加载技术，即图片在实际需要显示时才进行...
HTML5触摸事件演化tap事件介绍
09-28
而使用touchstart事件，应用可以在用户手指接触屏幕的瞬间就作出响应，从而实现更加流畅的图片切换效果。 此外，触摸事件处理还涉及到几个重要的属性，如： - touches：一个TouchList对象，包含了屏幕上当前所有...
手机设备上touchstart与click的区别
weixin_33994429的博客
12-22 2266
1.基本定义 touchstart 手指触碰开始就能触发 click 1.手指触碰 2.手指未在屏幕上移动 3.在这个dom上手指离开屏幕 4.触摸和离开屏幕之间的时间间隔较短 因此，click事件有其独特的地方，不能完全用touchstart替代。 2.click延时问题 因为手机浏览器上，两次轻触是放大操作，在第一次被轻触后，浏览器需要先等一段时间，检...
解决@touchstart和@click事件触发冲突问题,可使@touchstart和@click分别执行
weixin_42479305的博客
11-08 6353
只用在@click加stop，且在onTouchMove上添加阻止点击事件触发——e.preventDefault();即可完成拖动事件@touchstart和点击事件@click分别执行功能，且可以修复拖动按钮时会导致页面滚动问题。@touchstart不加修饰符,在onTouchStart点击事件中触发阻止click事件。如果需要阻止点击事件不触发，只触发@touchstart;事件，比如拖拽事件同时添加返回上一页功能;一般出现在我们给某个元素同时绑定。
vue h5页面 解决touchstart，touchmove，touchend，click事件触发产生的问题
最新发布
maoyuanh的博客
02-15 4215
我的思路是，触发touchstart方法的时候延迟200毫秒如果是就是触摸事件，否则在touchend里面判断就是点击十点，调用点击事件的方法即可。当你的需要即要求可以完成触摸事件，又要求有点击事件的时候，我们要搞清楚一个问题，事件触发的排序问题。
vue的touchStart事件及click事件冲突问题
梧桐芊羽的博客
09-14 2万+
一 问题： 今天遇到这样问题，给某个元素同事绑定touchStart及click事件后，若在移动设备上，当你点击时，会依次出发这两个事件。因为移动端的click事件触发是会延迟300ms，所以touchStart事件会先触发后再触发click事件。这样导致每次都要执行两次 ...
touchstart click 冲突
前端技术
07-04 1644
通过preventDefault()方法，可以阻止后面事件的触发。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>
kickstart详解(超级详细)
热门推荐
Be_Nice的博客
08-10 4万+
一、kickstart是什么   许多系统管理员宁愿使用自动化的安装方法来安装红帽企业 Linux.为了满足这种需要,红帽创建了kickstart安装方法.使用kickstart,系统管理员可以创建一个文件,这个文件包含了在典型的安装过程中所遇 到的问题的答案.   Kickstart文件可以存放于单一的服务器上,在安装过程中被独立的机器所读取.这个安装方法可以支持使用单一kickstart文件在多台机器上安装红帽企业Linux,这对于网络和系统管理员来说是个理想的选择.Kickstart给用户提供了一
移动端触发touchstart事件后同时阻止click事件触发
heeng4688的博客
10-23 4634
在移动端，手指点击一个元素，会经过：touchstart --> touchmove -> touchend --》click。 事件流本身会持续进行下去的。 做了几个demo验证了一下，上面的理论。 首先给一个元素同时绑定touchstart和click事件，看谁先触发。 html： var content = document.querySelector(".content"); ...
js click的点击两种交替的状态实现 及注意事项
u012028371的博客
08-12 2645
要在点击事件里 用if （hasClass(‘show’)）{}  判断类 ：如果true，不作处理；如果false,处理 加上这个类，去掉另一种状态的类（css类）。 ----------- 注意事项： 点击页面其他地方隐藏弹框， 要对触发show（）的target 的click事件 ，用return false  或 event.preventDefault() 组织冒泡。
自定义wap手机图片滑动切换：无CSS3与难题解决方案
在触屏设备上，事件流程通常遵循touchstart、touchmove、touchend、click的顺序。由于click事件会在touch系列事件处理结束后触发，如果在处理过程中没有正确判断是拖动而非点击，图片拖动会误触发页面跳转。为了解决...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值