在移动端页面,点击某个元素,发现整个元素出现了,蓝色闪烁的点击效果,查看资料是因为由于
cursor:pointer
的css属性设置,在移动端的谷歌浏览器下点击,会出现蓝色的点击效果。
一、解决方法:
- 1、可以注释掉使用的
cursor:pointer
- 2、可以使用属性
-webkit-tap-highlight-color: transparent;
- 3、可以使用css3新属性
pointer-events: none;
二、-webkit-tap-highlight-color
属性
- 含义:是一个非标准的 CSS 属性,用于设置在点击链接时出现在链接上的突出显示的颜色。突出显示向用户表明他们的点击被成功识别,并指示他们正在点击哪个元素
- 兼容性:该特性是非标准的,请尽量不要在生产环境中使用它
三、pointer-events: none;
属性
- 会使鼠标事件失效
- 兼容性:基本都兼容
四、最终方案
由于自己手动实现pc端导航栏的拖拽横盘滚动,在鼠标的mousedown
和mousemove
的事件中设置该属性。但是该属性在移动端是不会看出效果的,且在移动端是不会触发鼠标mousedown
和mousemove
事件.因此不用上面的方法,直接在移动端情况,不去触发这两个事件,这样就可以解决蓝色闪屏问题。