H5解决手机端 active伪类不生效问题

最新推荐文章于 2021-05-31 06:27:58 发布
最新推荐文章于 2021-05-31 06:27:58 发布
阅读量1.3k 收藏
点赞数
分类专栏： web前端 文章标签： H5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_31733311/article/details/89214304
版权

添加document.addEventListener(‘touchstart’, function() {}, false);

css的active事件在手机端不生效的解决方法
@必意玲
03-22 941
需求：需求就是实现点击图中的 “抽奖” 按钮，实现一个按钮Q弹的放大缩小动画。上面是实现的效果，pc端，点击触发。问题：但是这种方式在模拟器上可以，解决方案：在页面body添加一个。，下面是简单的demo代码。
移动端H5常见问题以及解决方案
bufanweb的博客
07-16 1551
移动端H5常见问题以及解决方案 问题 下面列举了我遇到的一些常规问题,如有遇到其他问题的请在评论区补充,之后我也会实践加以补充,感谢! 以下解决方案,均经过我测试成功,健康安全,请放下食用.由于篇幅问题,某些非核心的解决方案的实现细节暂未谈论,需要的自行研究. 1.iOS滑动不流畅 表现 上下滑动页面会产生卡顿,手指离开页面,页面立即停止运动.整体表现就是滑动不流畅,没有滑动惯性. 产生原因 为什么在iOS的webview中滑动不流畅,它是如何定义的?* 最终我在safari文档里面寻找到了答案(文
vue移动端h5伪类active没有效果问题
little_kid_pea的博客
03-18 1670
设置伪类:active样式以后，点击按钮发现没效果，仔细研究发现是click事件在点击态没有出现的时候就触发了，如果没有绑定click，或者click里没有进行页面跳转、dom节点删除等操作的话还是可以看到点击态的，尤其特别的是，自定义组件中不会有这个问题，因为在自定义组件中click以后emit将事件向组件调用者传递，vue的事件触发、事件分发系统是有时间延迟的，有了时间延迟也就看到了点击态。 ...
H5 api选择器
Chad97的博客
10-22 527
H5 api 1. querySelector() 获取符合选择器的第一个元素 2. querySelectorAll() 获取符合选择器的所有元素 类选择器 1. jquery操作类的方法：addClass() removeClass() toggleClass() hasClass() 2. h5也有类似的api 基于一个对象classList的方法 add() remove...
H5知识点大总结勾起你的欲望
android的博客
04-26 914
第 25 章 CSS3 过渡效果     学习要点：1.过渡简介   2.transition-property   3.transition-duration   4.transition-timing-function   5.transition-delay   6.简写和版本   本章主要探讨 HTML5 中 CSS3 的过渡效果，通过这个功能可以不借助
手机端 :active 样式不起作用的原因，如何解决
学习笔记
12-02 2070
手机端 :active 样式不起作用的原因，如何解决 一、原因 很多时候我们在 PC 端使用很好的 :active 样式，在移动端却没有效果。 原因是： :active 只有在 dom 元素被点击时，有 click 事件才会有的状态。 除了 PC 端的 click 事件，移动端有 touch 事件，并且 touch 相关事件的优先级要高于 click 事件，如果 touch 事件被取消，就不会有 click 事件，所以才会产生移动端点击时没有 :active样式的原因。 MDN 相关说明，查看 Event
12个前端必会 H5 问题及解决方法
qianduan666a的博客
08-14 1039
前言 作为一个开发了多个 H5 项目的前端工程师，在开发过程中难免会遇到一些兼容性等爬过坑的问题。现在我将这些问题一一汇总一下，并在后面给出坑产生的原理，和现阶段常规的填坑方案。由此来做一个阶段性的总结。 问题 下面列举了我遇到的一些常规问题，如有遇到其他问题请在评论区补充，之后我也会实践后加以补充，感谢！（经常更新该文） 移动端 H5 相关问题汇总： 1px 问题 响应式布局 iOS 滑动不流畅 iOS 上拉边界下拉出现白色空白 页面件放大或缩小不确定性行为 click 点击穿透与延迟
手机 html5 语音输入,整合vue开发H5+跨平台app (以开发语音识别为例)
weixin_39607447的博客
05-31 1460
HBuilder快速搭建H5+应用上一次尝试了下H5+开发了跨平台app，能够发现的事利用H5+开发app的话，其实就是利用h5将页面给作出来，而后借助H5+的sdk和原生系统作交互，而咱们开发人员只须要关系具体的页面功能开发既可。然而使用传统的H5 Html的方式显然生产力已经跟不上了，因而此次就尝试着使用VUE。基本思路以下。javascript1.利用vue开发app的页面2.而后将页面构建...
H5页面（八）常见的问题二------填坑
斗师——Ace
06-09 2083
添加小程序，兑换各种视频教程/数据资源。 1. 添加到主屏后的标题（IOS） <meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式（IOS） 当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进入并没有此效果） <meta name="app...
vue移动端项目active切换样式
weixin_46886988的博客
06-02 467
@click.stop为阻止事件冒泡 img active 切换图片 要注意啦 imgfour 是没有双引号的哦 这里要注意是要用相对路径哦 (记得一位大神和我说data中是不能使用@的 非常感激他) 最后就是要注意这儿啦 是.active 还有不是嵌套在里面哦 我这个大头虾就是嵌套在里面了,结果又糊里糊涂的以为是其他地方出现了问题 ...
微信浏览器或各种移动浏览器上:active伪类做的触觉反馈失效
weixin_34080903的博客
07-27 207
　　在做移动端页面的时候，会发现PC上那种:hover的效果是不管用了的，但又要给用户一个点击反馈怎么办呢？我管它叫触觉反馈。 　　细心点就会发现浏览器有自带了一点触觉反馈，在点击a、button、input的时候都会出现，像这样： 　　 　　应该有见过的吧。。这个应该是浏览器的默认样式，有时候是想要这样的，可以加样式解决，比如： a,button,input{-webkit-tap-...
移动端:active伪类无效的解决方法
热门推荐
freshlover的专栏
02-11 4万+
：active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式。最常用于锚点这种情况，一般主流浏览器下也支持其他元素，如button等。在多按键的鼠标系统中，：active只适用于主按键，目前的大部分情况都是左键即主键。 该伪类下定义的CSS样式只在按下鼠标按钮与释放鼠标按钮之间的短暂瞬间被触发显示。使用键盘的tab键也可以触发:active状态。 说到：active伪类就不得
关于一些伪类无法生效的情况
百岁如流富贵冷灰的博客
06-07 3452
今天在写代码的时候发现的一个关于多层次伪类无法生效的问题1.类似.class1 .class2:after{}这样的伪类是无法生效的，需要改成.class2:after{}  但是众所周知，对于：hover这样的伪类就不存在这样的问题2. 例如： .mx_table tbody tr:nth-child(odd){background:#355382;} .mx_table tbody tr:n...
解决active在苹果手机上失效的问题
lqx_520的博客
12-19 1951
active在苹果手机上失效的解决办法： 在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。 要让css的:active伪类生效，只需要给这个元素的touchstart/touchend绑定一个空的匿名方法即可成功。 Use the :active pseudo-class in your css, then add onto...
a的visited不起作用问题
nicexibeidage的博客
11-02 9655
visited问题 a:link{color:red} a:visited{color:blue} a:hover{color:yellow} a:active{color:pink} visited问题 在浏览器中访问这个代码时，会发现visited是不起作用的，这是因为链接无效会使a的visited设置无效, 这是因为链接点击后没有产生网页访问的历史记录, 所
伪类在ios移动端浏览器内无效的解决方法
烟火的博客
11-27 2129
伪类在ios移动端浏览器内无效的解决方法a:active 设置的样式在ios系统的浏览器内显示不出来，看来在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。 document.body.addEventListener('touchstart',function(){},false);
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值