微信浏览器或各种移动浏览器上:active伪类做的触觉反馈失效
在做移动端页面的时候,会发现PC上那种:hover的效果是不管用了的,但又要给用户一个点击反馈怎么办呢?我管它叫触觉反馈。
细心点就会发现浏览器有自带了一点触觉反馈,在点击a、button、input的时候都会出现,像这样:
应该有见过的吧。。这个应该是浏览器的默认样式,有时候是想要这样的,可以加样式解决,比如:
a,button,input{-webkit-tap-highlight-color:rgba(255,255,255,0);}
其实就是把a、button、input这些标签的系统触觉反馈的样式改了,白色透明:rgba(255,255,255,0);
最好加上哦,不然这个和以下自定义的样式同时出现还是挺怪的。
然后我们怎么自定义样式呢?以前曾经试过ontouchstart、ontouchend。。结果感觉实在是太麻烦了!而且感觉性能也很差,肯定有更好的办法。。
那就是:active这个伪类,duangduangduangduang!。像这样
a{color:#1ec4a3;}
a:active{color:#28A289;}
当手点下去的时候理论上讲是会变得更绿的。
但是是没用的!!
其实是因为少了行启用触觉事件监听的代码,只要在body上加上ontouchstart就好了,像这样:
<body ontouchstart>
内容
</body>
或者在你喜欢的地方插入js:
document.body.addEventListener('touchstart', function () {});
就好啦!!
然后有些可能要对div做触觉反馈,可以考虑给body或需要的地方加上:
-webkit-user-select: none;
这样会把系统字体放大镜、复制等给干掉。看需要加把 :)。
微信浏览器或各种移动浏览器上:active伪类做的触觉反馈失效的更多相关文章
- 解决scroll在ios上卡顿问题和兼容ios不支持:active伪类情况
//有时候因为滚动层级元素过多会产生卡顿,特别在ios上十分明显,如果不想更换其他实现方式,可以加:-webkit-overflow-scrolling: touch; 开启硬件加速: 兼容ios不支 ...
- 移动端:active伪类无效的解决方法
:active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式.最常用于锚点<a href="#">这种情况,一般主流浏览器下也支持其他元素,如button等. ...
- 移动端bug~~移动端:active伪类无效的解决方法【移动端 :active样式无效】
移动端:active伪类无效的解决方法[移动端 :active样式无效]2016-09-26 15:46:50 问题: 移动端开发的时候实现按钮的点击样式变化,但是在iphone[safiri Mo ...
- iOS Web开发激活css的active伪类
最近在做一个资讯客户端,用到UIWebview展示一些网页内容,本来想做一个简单的按压效果,发现在css中设置active属性一直不管用. 查阅了一下资料,今天发现,要让css active伪类生效, ...
- css :active伪类的理解
/*active伪类为点击鼠标按下去还没松开鼠标的那一瞬间的事件*/
- 解决ios不支持按钮:active伪类的方法
mozilla开发社区上有 :active 不起作用的答案: [1] By default, Safari Mobile does not use the :active state unless t ...
- 手机端css实现active伪类
今天遇到手机端的css中a标签的active不起作用,原本想循环a标签,给当前的a标签添加class来解决,可觉得有点儿小麻烦,经查资料了解到解决此问题,只需要添加一个touchstart的空事件即可 ...
- H5解决active伪类失效---点击后背景效果
<body ontouchstart></body> 给body注册一个空事件即可
- 获得touch事件,jquery绑定事件监听器,ios设备上打开touch状态以响应focus,active等伪类
2. 默认的监听方式 document.addEventListener('touchstart', function(){ alert('hello'); }, false); 使用jquery时 ...
随机推荐
- 【原创】Matlab.NET混合编程技巧之直接调用Matlab内置函数
本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新 Matlab和C#混合编程文章目录 :[目录]Matlab和C#混合编程文章目录 在我的上一篇文章[ ...
- Razor基本语法
前言: Razor引擎的核心是识别@符号及尖括号: 1.<...></...> 2.<.../> [之所以说是"尖括号"而非& ...
- Spark入门实战系列--3.Spark编程模型(上)--编程模型及SparkShell实战
[注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .Spark编程模型 1.1 术语定义 l应用程序(Application): 基于Spar ...
- RHEL6 某业务用户ulimit -a命令找不到
最终确定是shell环境问题,临时改为/bin/bash即可查看. 1.问题现象 # su - jingyu $ id uid=(jingyu) gid=(jingyu) (jingyu) $ uli ...
- Codrops 教程:基于 CSS3 的精美模态窗口效果
Codrops 分享了漂亮的模态窗口效果实现方法,希望给前端开发人员提供一些创新显示对话框的启示.这个方案使用了触发按钮(或任何的 HTML 元素),在点击的时候出现一个模态窗口,带有简单的过渡(或动 ...
- Windows GUI代码与Windows消息问题调试利器
Windows GUI代码与Windows消息问题调试利器 记得很久前有这么一种说法: 人类区别于动物的标准就是工具的使用.同样在软件开发这个行业里面,对于工具的使用也是高手和入门级选手的主要区别,高 ...
- Android聚合广告AFP的对接系统设计
工作需要,要对接阿里妈妈的广告聚合平台,简称AFP.对于一般的应用而言,想要流量变现,广告是显而易见的手段,尤其是在中国,打开一个千万级别的用户,肯定有某个地方是有对接广告的,只不过明不明显而已. 阿 ...
- Swift泛型Protocol对比C#泛型Interface
本篇纯属抬杠之作,之前我们提到了Swift的泛型Protocol使用associatedtype关键字,而不是使用<Type>语法的泛型参数.这其中有什么好处呢? 我就这个问题搜索了一些回 ...
- 《Inside UE4》-0-开篇
<Inside UE4>-0-开篇 InsideUE4 前言 VR行业发展是越来越火热了,硬件设备上有HTC VIVE,Oculus rift,PS VR,各种魔镜:平台上有Steam ...
- VUE 表单元素双向绑定总结
checkbox最基本用法: <input type="checkbox" v-model="inputdata" checked/> <in ...