javascript - 请问在移动端点击嵌套有img标签的a标签时，怎样才不会触发它的默认样式？

Question

这是我的html结构：

<a href=""><img src="img/icon_shop.jpg"/></a>

当我在点击a标签的同时，会在该元素上显示出一个遮罩层，在PC端和移动端的遮罩层不一样

在chrome模拟器中会出现以上的灰色层，在手机上会显示为蓝色，很影响体验，请问该怎样解决？

Answer 1

以下是我的reset.css,你的问题看最后一条；

:root *,body *{
    -webkit-touch-callout: none;//长按菜单
    -webkit-text-size-adjust:none;//停用字体优化
    -webkit-appearance: none;//form控件重置样式
    -webkit-tap-highlight-color: transparent;//点击高光
    -webkit-user-drag: none;//停用拖动
    -webkit-user-select : none;//停用用户选择
}

Answer 2

a,button,input,optgroup,select,textarea, p {
    -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/
}