3D样式在“部分真机”的遮挡原因（跟z-index无关），导致点击不上绑定点击事件的元素

作者: 凤玲日期: 2016-03-30

152871

最近做的一个专题项目(梦幻西游-阳光魅力榜)，遇到一个3D效果样式导致的问题附上项目地址：http://my.163.com/2016/ygmlb/m/index.html

大概描述下问题：

移动端 3D效果样式（3D翻转效果）导致在“部分真机”上，元素绑定的click事件点击无效，并不是js绑定点击事件方法bug或者不支持的原因，而是点击元素被遮挡了（谷歌浏览器所有模拟机和其他真机测试没问题，在“三星某个型号手机” 和“华为P7手机”绑定点击事件元素被遮挡了。），遮挡问题跟z-index层次高低无关。

3D翻转效果HTML部分代码简化如下：

<div class="module">    
    <div class="info">
        <a class="l-btn" href="javascript:void(0);">点击这里翻转</a>
            内容前面        
    </div>
    <div class="info-desc">
        <a class="l-btn" href="javascript:void(0);">点击这里返回</a>
        背面       
    </div>
</div>

3D翻转效果LESS部分样式`(未修复前)`简化如下：

.module{
    width:6.55rem;
    height:7.59rem;
    perspetive:10rem;
    -webkit-perspective:10rem;
    position:relative;    
    .info, .info-desc{
        width:6.55rem;
        height:7.59rem;
        position:absolute;
        top:0;
        left:0;
        backface-visibility:hidden;
        transition:all 0.6s ease-out;
        -webkit-transition:all 0.6s ease-out;
        transform-style:preserve-3d;
        -webkit-transform-style:preserve-3d;
    }
    .info{
       z-index:2;
       transform:rotateY(0deg);
       -webkit-transform:rotateY(0deg);
       opacity:1;     
    }
    .info-desc{
        z-index:1;
        transform:rotateY(-180deg);
        -webkit-transform:rotateY(-180deg);
        opacity:0;
    }
    &.on{
        .info{
            transform:rotateY(180deg);
            -webkit-transform:rotateY(180deg);
            z-index:1;
            opacity:0;        
        }
        .info-desc{
            transform:rotateY(0deg);
            -webkit-transform:rotateY(0deg);
            z-index:2;
            opacity:1;       
        }
    }
    .l-btn{
        position:absolute;
        width:0.84rem;
        height:0.84rem;       
        top:3.3rem;
        left:5.6rem;
        z-index:3;
        display:block;
         
    }   
}

解决问题曲折过程（可略过不看）：

1、一开始考虑到是不是被遮挡了，检查了一遍样式，样式代码层次高低，按道理正常啊，不过还是调整层次测试了一遍，问题依然存在

2、经过第一步测试后，猜想应该不是层遮挡原因吧，然后想应该是js方面的bug，想不通，于是求助小伙伴，如下处理：
点击事件简化代码：

$(".module .l-btn").live("click",function(){ 
     alert(1); 
})；

处理：
a、猜想会不会zepto(mixNIE).last.js，不支持live绑定？然后更改绑定事件写法，问题依然存在，如下：

$(document).on("click",".module .l-btn",function(e){
    alert(1); 
});

b、是不是跟页面没引入event.js有关？于是引入，问题依然存在..
然后：更改点击对象，它的外层module作为点击对象，这样子点击有效。代码如下：

$(document).on("click",".module",function(e){    
    alert(1); 
});

c、猜想不是绑定事件方法的原因，然后返回检查元素层次，是不是被遮挡，检查元素之间z-index按道理没问题呀，不过还是试图改下加大z-index，测试后问题依然存在..

d、然后猜想，是不是3D效果原因导致的，于是更改样式如下：注释掉如下几个3D辅助样式，但问题依然存在：

perspective:10rem;
-webkit-perspective:10rem; 
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;

...等等反复调试，问题依然存在。。
时间已经很晚啦，小伙伴有其他紧急的事要处理，然后暂时放下。。

3、第二天一大早，求助另一小伙伴。

处理：
a、更改z-index
b、更改点击对象为它的外层module
c、更改代码结构，把点击元素移外层，并调整z-index值
如下更改结构简化代码：

<div class="module"> 
   <a class="l-btn" href="javascript:void(0);">点击这里翻转(返回)</a>   
   <div class="info">
        内容前面        
    </div>
    <div class="info-desc">
        背面       
    </div>
</div>

...等等反复调试，问题依然存在。。

终于终于小伙伴找到解决方法了（^_^）~~

解决问题方法

3D效果的元素样式添加visibility样式，关键：visibility:hidden;
部分样式简化代码如下：

.module{
 
    .info, .info-desc{
    }
    .info{
         z-index:2;
        transform:rotateY(0deg);
        visibility:visible; 
     }
    .info-desc{
        z-index:1; 
        transform:rotateY(-180deg);
        visibility:hidden; /*关键样式*/ 
    }
    &.on{
        .info{       
            z-index:1; 
           transform:rotateY(180deg);
          visibility:hidden;        
        }
        .info-desc{
            z-index:2; 
              transform:rotateY(0deg);
              visibility:visible; 
        }
    }
    .l-btn{
    }   
}