移动端a:active,button:active失效，解决办法！

最新推荐文章于 2023-10-26 12:20:01 发布
原创 最新推荐文章于 2023-10-26 12:20:01 发布 · 1.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文解决了移动端尤其是iOS设备上a:active和button:active样式失效的问题。通过为页面元素添加touchstart事件监听器，可以有效激活对应的CSS伪类状态。

移动端a:active,button:active失效，解决办法！

a:active,button:active在PC端效果正常，但是在移动端的IOS机型上点击失效。

解决办法：在body或者按钮上加上touchstart事件即可。

代码如下：

document.body.addEventListener('touchstart',function(){// 空函数就可以},false)


css的active事件在手机端不生效的解决方法
@必意玲
03-22 1100
需求：需求就是实现点击图中的 “抽奖” 按钮，实现一个按钮Q弹的放大缩小动画。上面是实现的效果，pc端，点击触发。问题：但是这种方式在模拟器上可以，解决方案：在页面body添加一个。，下面是简单的demo代码。
常见的移动端H5页面开发遇到的坑和解决办法
qq_35859392的博客
04-17 1035
转过来，平时看看。虽然还有很多问题至今无解。比如：华为麒麟950的P8和meta打开我们的应用首页经常偶发白屏。！！ 1、安卓浏览器看背景图片，有些设备会模糊。 用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？ 经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的9...
button：active在移动端失效问题
heishan_的博客
10-08 1429
在js中加入以下代码： document.body.addEventListener('touchstart',function(){}) //解决ios :after伪类失效
通过一个按钮来学习关于用户行为的伪类选择器
一碗周
08-31 856
Hello 大家好，我是一碗周，不是你想的那个“一碗粥”，是一个不想被喝掉的前端????????‍????，如果我写的文章有幸可以得到你的青睐，万分有幸~ 这是【从头学前端】系列文章的第二十九篇-《通过一个按钮来学习关于用户行为的伪类选择器》 编写不易转载请获得允许 写在前面 本篇文章将来学习用户行为伪类选择器，该篇文章中的主要内容如下图所示： 按钮元素 在HTML中的按钮元素，一般情况下指的就是<button>元素，这是一个双标签元素，如下代码展示了<button>元素的用
手机端 :active 样式不起作用的原因，如何解决
学习笔记
12-02 2254
手机端 :active 样式不起作用的原因，如何解决 一、原因 很多时候我们在 PC 端使用很好的 :active 样式，在移动端却没有效果。 原因是： :active 只有在 dom 元素被点击时，有 click 事件才会有的状态。 除了 PC 端的 click 事件，移动端有 touch 事件，并且 touch 相关事件的优先级要高于 click 事件，如果 touch 事件被取消，就不会有 click 事件，所以才会产生移动端点击时没有 :active样式的原因。 MDN 相关说明，查看 Event
移动端:active伪类无效的解决方法
qq_28265403的博客
04-10 2031
:active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式。最常用于锚点这种情况，一般主流浏览器下也支持其他元素，如button等。在多按键的鼠标系统中，：active只适用于主按键，目前的大部分情况都是左键即主键。 该伪类下定义的CSS样式只在按下鼠标按钮与释放鼠标按钮之间的短暂瞬间被触发显示。使用键盘的tab键也可以触发:active状态。 说到：active伪类就不得
父元素使用了原生的 click 事件处理逻辑（如 CSS 的 :active 或 JavaScript 原生绑定）怎么处理子元素.stop不生效的问题
07-01
但在以下场景中可能会失效： - 父元素是通过原生 JS 绑定的事件监听器（如 `element.addEventListener('click', handler)`）。 - 子元素虽然用了 `.stop`，但原生事件监听器仍然会触发。 --- ## ✅ 解决方案 ###...
【移动端适配】：Keep Login In-crx插件在移动设备上的表现优化
![【移动端适配】：Keep Login In-crx插件在移动设备上的表现优化]...深入探讨了移动端适配策略，包括响应式设计、特定于移动端的布局和交互优化以及性能提升技术。本文通过实践案例分析了Keep Login In-c
PyQt6 QPainter::drawPath: Painter not active
最新发布
09-18
### PyQt6 中解决 `QPainter::drawPath: Painter not active` 错误的完整指南 此错误表示在 `QPainter` 未激活状态下尝试调用 `drawPath()` 方法。根本原因是绘图器未正确初始化或生命周期管理不当。以下是已验证的...
ng-class="{'active-chosen' : activeIndex == index, tab-item': activeIndex !== index }" 为什么无效
06-13
以下是一些可能导致问题的原因及解决方法： 1. **语法错误**：确保 `ng-class` 的语法正确。例如，如果需要基于条件表达式动态设置类名，应使用对象或数组形式的语法。 ```html <div ng-class="{'active': is...
vue移动端h5伪类active没有效果问题
little_kid_pea的博客
03-18 1735
设置伪类:active样式以后，点击按钮发现没效果，仔细研究发现是click事件在点击态没有出现的时候就触发了，如果没有绑定click，或者click里没有进行页面跳转、dom节点删除等操作的话还是可以看到点击态的，尤其特别的是，自定义组件中不会有这个问题，因为在自定义组件中click以后emit将事件向组件调用者传递，vue的事件触发、事件分发系统是有时间延迟的，有了时间延迟也就看到了点击态。 ...
css-移动端:acitve效果的实现
小白
12-06 8138
pc端的css的a标签的:active。在移动端上的bug修复。移动前端与pc端的:hover的效果，:hover是鼠标指针浮动在其上的元素的一个选择器，但因为在移动端是没有鼠标的，代替的是触摸屏，用户也不是有“鼠标指针浮动在其上的元素”的情况，有也很少。 所以取代的应该:active这个选择器，但是通过实践，发现情况不是很理想，在QQ浏览器上有时触发，有没不触发，在我mx3带自浏览器上根本没效
如何自己实现一个 Button，它在PC端有常态、Hover态、Active态，在移动端没有Hover态
小王的技术库
05-09 1539
Button在PC端的3种状态 在PC端，如果你想自己实现一个让用户体验好的Button，至少需要设置3种状态的样式： 常态 Hover态 Active态 （当然，你可以视情况增加其它状态，例如Disabled态、Loading态） 拿ant design举例子，介绍下3种状态： 常态 Hover态（光标悬浮在按钮上） 这种状态，通常的设计规范是：元素亮度比常态高。且鼠标是手形。（目的是突出展示鼠标停留的元素，避免点错按钮） Active态（光标左键按下按钮并保持按住） 这种状态，通常的设计规范是：
html js页面跳转的几种方式
秋̶᭄ꦿ攻城狮࿆ྂ
09-27 2921
页面跳转的几种方式 一：js的跳转 1.直接跳转：window.location.href <script language="javascript" type="text/javascript"> window.location.href="a.jsp?callback="+window.location.href; //或者 window.location.href='http://www.baidu.com'; </script> 2.回到上一层页面
CSS 实现按钮点击动效的套路
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
02-19 4211
前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群在 Web 中，大部分按钮可能都是平平无奇的，有时候为了强调品牌特殊或者满足特殊功能，可能需要给按钮添加一点点击动效。比如，用...
vant 带关闭按钮div_[已解决]vant-ui源码vant-button的几个疑问
weixin_39628405的博客
12-22 529
业务背景用了uni-app一年啦,但是没有通用的ui框架,就想着自己仿vant-weapp,适配一下uni-app,能够在各个端上用这两天把button仿下来,但是里面有几个地方还存在疑问,关于css为什么要使用新的css变量?在package/common/style/theme.less文件下面好多css属性值都被替换成了原生变量了var(--$1, @{$1})可实际上,我在vant小程序示...
按钮hover active效果
u014798510的博客
11-01 1826
效果： 例子链接：http://pan.baidu.com/s/1kVz2LKj
button样式
sun13212715744的博客
10-26 816
禁用按钮</button><button class="circle-button">圆形按钮</button><button class="border-button">边框按钮</button><button class="button">普通按钮
css button 四种状态,css中按钮的四种状态
weixin_35326667的博客
08-03 2485
css中按钮有四种状态普通状态hover 鼠标悬停状态active 点击状态focus 取得焦点状态.btn:focus{outline:0;} 可以去除按钮或a标签点击后的蓝色边框下面的例子中.btn1用focus按钮会按下，不弹起.btn2用active按钮点击按下，会弹起html：Save SettingsSubmitCSS：.btn{appearance: none;background:...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值