点击穿透与1px的实现。

点击穿透

什么是点击穿透？

在移动端，当通过ontouchstart事件关闭浮层时，浮层下面的元素也被点击。

点击穿透的原因？

触屏设备为区分双击操作，做了300ms的延迟。因此用户的操作及事件触发流程如下：

1. 手指触摸屏幕，触发touchstart事件。
2. 手机触摸屏幕时肯定会有短时间的停留。有移动则会触发touchmove事件。
3. 手指离开屏幕触发touchend事件。
4. 等待300ms， 如果再次点击，判断为双击。
5. 如果没有双击，则浏览器触发一个click事件。

所以当我们通过touchstart关闭浮层时，浮层已经关闭，在300ms后又在触摸位置产生了click事件，所以出现点击穿透的情况。

尝试解决办法

1. 通过设置 <meta name="viewport" content="device-width"> 标签，这样可以去掉click的延迟时间。但是这样是不可行的。因为click事件在touch事件之后，还是有一定的时间间隔。
2. 使用click关闭浮层。
3. 设置浮层关闭时间，大于300ms。
4. 通过 event.preventDefault()

1px 的实现

1. border-bottom: .5px solid #000; 部分安卓设备无效。
2. 利用伪类使用scale进行缩放

.xx::after {
      content: '';
      display: block;
      height: 1px;
      transform: scaleY(0.5);
      background: #000;
      position: relative;
      top: 10px;
    }

3. 伪类加渐变的背景色

.xxx::after {
      display: block;
      content: '';
      height: 20px;
      background: linear-gradient(0deg, #ccc 50%, red 50%);
      position: relative;
      top: 10px;
    }

4. 直接使用linear-gradient背景色

.xxx{
      margin: 10px 0;
      padding: 10px;
      background: linear-gradient(to bottom, #ccc .5px, transparent 0), linear-gradient(to left, #ccc .5px, transparent 0), linear-gradient(to right, #ccc .5px, transparent 0), linear-gradient(to top, #ccc .5px, transparent 0);
    }