Javascript 如何捕获在远离屏幕的CSS 3D转换的HTML元素上的点击？_Javascript_Html_Css

Javascript 如何捕获在远离屏幕的CSS 3D转换的HTML元素上的点击？

javascript html css

Javascript 如何捕获在远离屏幕的CSS 3D转换的HTML元素上的点击？,javascript,html,css,Javascript,Html,Css,我有一个div，它绕着x轴旋转，围绕它的中心旋转，这样上半部分从屏幕上“落下”，而下半部分则朝向屏幕。当我试图捕获onclick事件时，只有在div的中心下方单击它，我才能从div中获取它。如果我在其中心上方单击它，则包含的div将接收onclick事件我已经尝试使用z-index和translateZ（）将div移动到前面，但是当我单击div的上半部分时，包含的div仍然会收到onclick 如何让div接收onclick事件，而不管它在div上的哪个位置被单击下面的示例演示了问题： &l

我有一个div，它绕着x轴旋转，围绕它的中心旋转，这样上半部分从屏幕上“落下”，而下半部分则朝向屏幕。当我试图捕获onclick事件时，只有在div的中心下方单击它，我才能从div中获取它。如果我在其中心上方单击它，则包含的div将接收onclick事件

我已经尝试使用z-index和translateZ（）将div移动到前面，但是当我单击div的上半部分时，包含的div仍然会收到onclick

如何让div接收onclick事件，而不管它在div上的哪个位置被单击

下面的示例演示了问题：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function onMainClick() {
    console.log('onMainClick()');
}

function onContainerClick() {
    console.log('onContainerClick()');
}
</script>
<title>Click Test</title>
</head>
<body>
    <div onclick="onContainerClick()" style="width: 200px; height: 200px; background-color: burlywood">
        <div onclick="onMainClick()" style="width:100%; height: 100%; background-color: grey; -webkit-transform: perspective(1000px) rotateX(45deg)"></div>
    </div>
</body>
</html>


函数onMainClick（）{
log（'onMainClick（）'）；
}
函数onContainerClick（）{
log（'onContainerClick（）'）；
}
点击测试

单击灰色div的上半部分时，不会调用onMainClick（）。

在a中构建案例，我不知道透视旋转的作用，但解决方案是给另一个div一个z索引-1

CSS

#div1 {
    width: 200px;
    height: 200px;
    background-color: burlywood;
    z-index: -1;
}

#div2 {
    width: 100%;
    height: 100%;
    background-color: grey;
    -webkit-transform: perspective(1000px) rotateX(45deg);
}

更新：更正JSFIDLE链接…

发布一个示例html，以便更容易获得您的ideaBeware'z-index:-1；'可以使某些浏览器不打印元素。请注意，只要这些浏览器不是Chrome或Safari。。。除webkit之外，整个程序在任何其他应用程序上都不起作用。