点击处理程序在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

使用单击父元素，并将“e.target”与“this”进行比较。

//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