html触摸点所在的div,雨林寒舍 | 利用active伪类实现网页在触摸屏下的点击状态效果...

在开发触摸屏下的网页时，常常会发现hover所带来的效果并不完美，在iOS系统下，hover的效果并不展现，只有当手指点击时才出现效果，并且返回页面的时候，hover的状态一直保留，所以我们需要使用active伪类来为触摸屏下的网站实现一个点击效果。 如果使用ios系统的朋友还应当有所发现，即点击按钮或链接时，会有一个高亮区域，半透明的黑色背景 那么我们如何来改变这个黑色块的样式？ 在iOS设备中，有一个名为-webkit-tap-highlight-color的属性，即定义了用户点击按钮时所产生的高亮背景 想要禁用这样的高亮效果，我们就需要将他的颜色值改为完全透明

代码如下

body {

-webkit-tap-highlight-color:rgba(0,0,0,0);

}

这是我们就屏蔽了默认的点击黑色背景块的显示。然后接下来我们对我们的按钮进行一个点击设置

首先我们先设置一下CSS

body {

-webkit-tap-highlight-color:rgba(0,0,0,0);

}

.btn {

width:100px;

height:40px;

background: #000;

color:#fff;

font:normal 14px/40px "Microsoft Yahei";

}

.btn:active {

line-height: 50px;

}

HTML

Click Me

仅仅这样还是无法实现点击的效果，因为我们还需要屏蔽默认的触摸事件，这里需要借助JS的帮忙

window.οnlοad=function(){

document.addEventListener("touchstart", function(){}, true);

}