苹果手机无法识别hover，click事件的触发需要双击的问题

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

今天在做手机端页面切图的时候发现苹果手机无法识别hover，后来度娘了一下，原来ios是将hover事件默认为click事件来处理的
所以就只能判断喽，也许会有别的办法，先记录下吧

判断访问终端，如果是手机的话，就没有 hover 样式，如果是电脑的话，就显示hover 样式

这样就解决喽

如果有没看明白的童鞋们，可以在下面留言给我

ECHO陈文
关注
专栏目录
jQuery鼠标事件与hover事件
weixin_44550190的博客
05-17 3382
（作者：老薛，撰写时间：2019年5月13日） 在我学到jQuery鼠标事件，我知道了jQuery鼠标事件列表中有很多事件，它们分别是：1.click 单击事件、2.dbclick 双击事件、3.mousedown 鼠标按下事件、4.mouseup鼠标弹起事件、5. mouseenter 鼠标进入事件、6.mouseleave 鼠标离开事件。 说到jQuery鼠标事件，我也不得不提到click与d...
jQuery 事件（ jQuery 事件方法/绑定事件/解绑事件/触发事件/事件对象）
zyfacd的博客
03-19 339
jQuery 事件 jQuery 是为事件处理特别设计的。 jQuery的事件机制，指的是：jQuery对JavaScript操作DOM事件的封装，包括了：事件绑定、事件解绑、事件触发。 jQuery事件的发展历程 简单事件绑定 >> bind事件绑定 >> delegate事件绑定 >> on 什么是事件？ 页面对不同访问者的响应叫做事件。 事件处理程序指的是...
解决ios出现hover和click事件，click事件的触发需要双击的问题
gll77
03-26 4816
 由于ios是将hover事件默认为click事件来处理，可通过js判断当前设备是移动端还是pc端，若是pc端则添加一个css类并设置hover样式，若是移动端，则无hover样式。 代码如下：   相关链接：点击打开链接...
苹果手机无法识别hover的解决方案
lanseyuanwei2的博客
07-12 2067
在html页面后面加上 var mobileHover = function () {     $('*').on('touchstart', function () {         $(this).trigger('hover');     }).on('touchend', function () {         $(this).trigger('hover');    
：hover在ios无效问题
Cris_are的博客
12-18 381
a:hover 设置的样式在ios系统的浏览器内显示不出来，看来在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。 代码如下： document.body.addEventListener('touchstart',function(){}); 1 或者给body添加ontouchstart <body ontou...
IOS需要点击两次才出发点击效果
m0_70511264的博客
11-25 832
IOS需要点击两次才出发点击效果
ontouchstart实现手机触屏中的hover效果
web前端基础知识
03-04 2267
ontouchstart实现手机触屏中的hover效果 最近一直都在做手机网站的项目，会经常遇到手机屏幕触摸无交互效果，今天在一篇文章中看到模拟网页端hover效果的例子拿出来和大家分享下，已经使用效果还不错，大家可以根据下面的案例学下：   一、css样式： &lt;style type="text/css"&gt;.inner { width: 100%; height: 100p...
CSS实现超级链接需要通过双击后跳转
09-25
接下来，我们将详细介绍如何使用CSS实现超级链接需要通过双击后跳转。 首先，我们需要理解CSS中的`:hover`、`:active`和`:focus`伪类。这三个伪类分别对应于元素在鼠标悬停、被激活（点击但未释放）和获取焦点时的...
鼠标触发的事件，JS脚本
07-04
鼠标触发的事件，JS脚本 鼠标事件是指在 Web 浏览器中，用户通过鼠标交互引发的事件。这些事件可以被 JavaScript 捕获和处理，以实现各种交互效果。下面是常见的鼠标事件： 1. onClick：鼠标点击事件，多用在某个...
jQuery鼠标事件总结
10-21
需要注意的是，该事件必须在鼠标左键被按下并且被释放之后才会触发。在jQuery中，可以使用click()方法绑定点击事件。 示例代码： ```javascript $('p').click(function(){ alert('click function is running!'); }...
a:hover伪类在ios移动端浏览器内点击无效的解决方法
weixin_30851867的博客
06-12 440
安卓页面可以打开，苹果端hover上去打不开；hover的没有方法没有激活； a:hover 设置的样式在ios系统的浏览器内显示不出来，看来在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。 代码如下： document.body.addEventListener('touchstart',function()...
关于苹果端（iphone）浏览器（safari）不支持：hover解决方案
最新发布
AMU的博客
12-18 572
在一个响应式切图项目中遇到的问题，这本是一个经典的侧边栏效果，鼠标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) { ...
移动端 H5 相关疑难总结
渣渣宇的博客
02-03 1055
本文主要讲解关于移动端H5页面内的一些小操作、与app之间的交互 注意事项 A. 本文提及的安卓系统包括Android和基于Android开发的系统 B. 本文提及的苹果系统包括iOS与iPadOS C. 本文内的大部分内容都是适应绝大多数浏览器的，所以除去某些偏门操作不用担心兼容问题 D. 本文是针对移动端浏览器的，所以下文提到的浏览器均为移动端浏览器，PC上不一定会有效 HTML 调用系统功能 使用 < a > 能快速调用移动设备的 电话/短信/邮件 三大通讯功能 使用 < input
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开发笔记之多点触控（一）处理触摸的4个方法
Marvindev(移动开发)
01-13 2130
多点触控乃苹果公司带给世界的创新之首，作为移动开发者，熟练掌握多点触控开发技能很有必要。 处理触摸的四个方法： -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event     //首次在屏幕上检测到触摸时调用 {     NSLog(@"touchesBegan"); } -(void)touchesM
echarts 饼图无法触发hover事件
06-06
如果 echarts 饼图无法触发 hover 事件，你可以尝试以下几个方法： 1. 确认数据是否正确：确保饼图的数据是正确的，且每个数据项都有对应的名称和数值。 2. 确认配置是否正确：检查 echarts 饼图的配置是否正确，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值