单击处理程序在css转换后不在chrome中触发

Question

我有两个使用css过渡交替/翻转侧面的div。

transform: rotateX(90deg) translateZ($cube-height*1.7);

我有一个适用于两个div的点击处理程序，但只有第一个触发事件。

$('.cube-face').on('click',function(){
    window.location = ($(this).attr('data-draw-link'));
});

我创建了a fiddle来证明这一点，点击处理程序只显示一个警告窗口。 我已经阅读了类似的问题但尚未找到解决此问题的方法。我尝试过改变背面可视性和视角，但没有成功。

如何为第二个div启用点击处理程序？

Chrome中会出现此错误。

Answer 1

使用点击父元素，并比较＆＃34; e.target＆＃34;用＆＃34;这＆＃34;。

//go to this draws results on click
$('#resultsFlipper').on('click',function(e){
    if(e.target == this){
        alert("green");
    } else {
        alert("red");
    }
});

here is your updated fiddle