解决ios出现hover和click事件，click事件的触发需要双击的问题

最新推荐文章于 2023-12-18 19:28:31 发布
最新推荐文章于 2023-12-18 19:28:31 发布
阅读量4.8k 收藏 3
点赞数 1
分类专栏： web前端 文章标签： css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gll77/article/details/79697736
版权

 由于ios是将hover事件默认为click事件来处理，可通过js判断当前设备是移动端还是pc端，若是pc端则添加一个css类并设置hover样式，若是移动端，则无hover样式。

 代码如下：

 

 


 

相关链接：点击打开链接


gll77
关注
专栏目录
解决iOS下无法触发focus事件的问题
01-04
前提 我的思路需要在点击事件之后，先让一个input元素失去焦点，再让另一个input 元素获取到焦点，...发现安卓稳定出现小键盘，但是ios不触发键盘。找了半天，发现是setTimeout的问题，所以我只能 考虑 把 $(‘#search
IOS需要点击两次才出发点击效果
m0_70511264的博客
11-25 831
IOS需要点击两次才出发点击效果
苹果手机无法识别hover，click事件的触发需要双击的问题
ECHO陈文的博客
04-15 1742
今天在做手机端页面切图的时候发现苹果手机无法识别hover，后来度娘了一下，原来ios是将hover事件默认为click事件来处理的 所以就只能判断喽，也许会有别的办法，先记录下吧 判断访问终端，如果是手机的话，就没有 hover 样式，如果是电脑的话，就显示hover 样式 这样就解决喽 ...
关于苹果端（iphone）浏览器（safari）不支持：hover解决方案
最新发布
AMU的博客
12-18 569
在一个响应式切图项目中遇到的问题，这本是一个经典的侧边栏效果，鼠标hover的时候拉出来详细的信息，因为是适配手机的，但是在iphone下出现了问题，当点击侧边栏的某一个的时候，可以正常的拉出来信息，但是却不能收缩回去了。这个也很好理解，因为手机下只有触摸事件，并没有hover（移上去）事件。于是想到了阻止冒泡等方法，最终都没能完美地解决，而在查了国内资料无果，再次查阅国外资料的时候找到了解决方案，并且非常的简单：只需要。
解决a标签hover在移动设备点击两次才跳转
lu900618的专栏
11-02 1738
/* 解决 移动设备 hover 二次点击 */ $(function () { $('a').on('click touchend', function (e) { var el = $(this) var link = el.attr('href') window.location = link }) })
ios 里面hover的兼容问题
Allen-Ye博客
03-24 836
最近在做手机端跟pc端一套代码自适应的，用的是@media，手机端是用rem，正常我们写样式会用到hover这个css，可是在ios就会出现兼容问题，今天刚好解决了，随便记录下 a:hover 设置的样式在ios系统的浏览器内显示不出来，看来在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。 1、js代码document.bo...
关于ios上点击事件触发经过导致layui nav跳转的bug
alxe46144的博客
11-22 139
在ios上点击事件其实是第一下触发的hover事件，第二次点击才是触发click事件； 在用layui 的nav菜单，它的跳转是通过click事件触发的，所以在ios上就会出现，页面跳转需要点击两次才能触发； 解决办法： 监听touch事件，如果有跳转就手动触发跳转，如果有点击事件就执行点击事件；已测试有效 $("a").on('touchend', function(e) { ...
IOS设备上给body绑定click事件不生效的原因及解决办法
01-05
　最近在做一个移动端业务的时候碰到一个bug，在ios上对body绑定click事实现事件代理冒泡至某些元素上尽然不生效。 思考： 　暂借助jquery展示下事件绑定代码，将所有标签含有data-tip属性的元素通过事件代理至...
iOS下Safari点击事件失效的解决方法
08-28
当我们使用委托给一个元素添加click事件时，如果事件是委托到document或body上，并且委托的元素是默认不可点击的（如div, span等），此时click事件会失效。例如，我们可以使用以下代码在iOS中进行测试： ```html <!...
移动端 H5 相关疑难总结
渣渣宇的博客
02-03 1054
本文主要讲解关于移动端H5页面内的一些小操作、与app之间的交互 注意事项 A. 本文提及的安卓系统包括Android和基于Android开发的系统 B. 本文提及的苹果系统包括iOS与iPadOS C. 本文内的大部分内容都是适应绝大多数浏览器的，所以除去某些偏门操作不用担心兼容问题 D. 本文是针对移动端浏览器的，所以下文提到的浏览器均为移动端浏览器，PC上不一定会有效 HTML 调用系统功能 使用 < a > 能快速调用移动设备的 电话/短信/邮件 三大通讯功能 使用 < input
iOS开发笔记之多点触控（一）处理触摸的4个方法
Marvindev(移动开发)
01-13 2129
多点触控乃苹果公司带给世界的创新之首，作为移动开发者，熟练掌握多点触控开发技能很有必要。 处理触摸的四个方法： -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event     //首次在屏幕上检测到触摸时调用 {     NSLog(@"touchesBegan"); } -(void)touchesM
iPhone Safari 不兼容 :hover 的解决方法
学习笔记
11-17 5900
不支持hover，用js解决，写一个单独的类，比如.active.active{ background-color: #eee; }/***************** 在鼠标进入li的时候 1. 去除其它`li`的 `.active` 2. 给当前`li`添加类`.active` ********************/ $(function(){ $('ul l
ios hover problem【iphone和ipad hover态不消失问题】
wxyoo1 的技术人生
03-05 3913
【iphone和ipad hover态不消失问题】ios hover problem
【iOS】—— UIKit相关问题
m0_62386635的博客
07-31 1516
prepare方法被自动调用，以保证layout实例的正确。
解决hover影响移动端样式
m0_46627730的博客
04-21 5942
平时我们写网页的时候，通常会使用hover使得网页效果更好，但我们一旦切换到移动端显示时，我们会发现效果很糟糕。原本hover样式是鼠标悬浮显示，不悬浮就消失了的，但在移动端，我们点击后才显示hover样式，此后如果我们不做处理，那么hover样式就一直存在… 问题图： pc鼠标悬浮时，显示样式： pc鼠标移开后，样式消失： 移动端点击后，样式不消失： 要解决这个问题，当然首先要判断当前设备...
解决 iOS 设备上链接因悬停需点击两次才跳转的问题
随便记记
03-25 1275
起因：vue项目的路由有hover效果 放到ios设备上时hover被识别成了第一次点击，需要点击第二次才跳转 解决：在写sidebaritem的页面加入如下代码，成功! $(document).ready(function() { $('a').on('click touchend', function(e) { var el = $(this); var ...
vue和uniapp开发h5移动端IOS系统需要点击两下才能触发点击事件
weixin_42711805的博客
07-05 2239
fastclick
js 点击和悬浮事件的坑
青梅煮酒论英雄的博客
03-30 3753
一、点击事件不生效 1.可能dom元素还没有加载然后就调用了click事件，一般出现在动态加载表格的情况，解决方法有两种，一个是在加载完表格之后再去加载click事件，一个在表格的元素里增加click事件 $('#webradio').on('click',function(){ }) 二、点击事件点击一次执行多次事件 先解绑这个事件在添加 off.on 或者unbind....
hover和点击事件之间的冲突
青枫浦
02-11 9404
本文转自 博客园 原作者：渣渣猿 我们有个li 现在需要一个点击发生改变和另一个仍然可以进行hover 商品点击后会变色，然后商家依然可以进行hover。 不可取的方法为： (1) JQ添加点击事件改变其css( ) 这种方法不可用，因为通过javascript修改background-color会覆盖在css中定义的所有background-color属性，当然也包含hover下的
使用focusout事件解决IOS键盘收起页面不回弹问题
作者通过详细描述问题的症状、页面结构以及问题分析，提出了解决方案，即利用`focusout`事件来确保键盘收起时界面自动归位。文中还介绍了如何优雅地通过事件代理技术来实现这一功能，避免为每个输入框单独添加`blur`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值