css转换后单击处理程序未在chrome中触发答案

【问题标题】：click handler not firing in chrome after css transitioncss转换后单击处理程序未在chrome中触发
【发布时间】：2014-12-15 02:36:55
【问题描述】：

我有两个使用 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 中。

【问题讨论】：

标签： jquery css

【解决方案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

【讨论】：

谢谢。您的解决方案适用于 chrome，但现在不适用于 Firefox！
您可以使用“e.target.tagName”或其他属性进行比较。可能会有所帮助。