HTML中，使用3D动画效果后，按钮绑定事件的失效问题

设计目标

我在主页上设计了一条导航栏，通过点击导航栏上的按钮之后，实现JavaScript的重新渲染（非网页跳转），以下是效果图。

 

发现问题：

        当我看到JavaScript成功渲染并且3D的旋转动画也在正常的进行后，很开心，毕竟目标实现了嘛。但是马上就开心不起来了。。。

        因为我发现，当我再次点击导航栏的时候，按钮的效果是被触发了的，但是按钮的点击事件没有触发。我清楚是因为3D动画的原因，因为没有添加3D动画之前我的导航栏全部都是正常的，hover伪类和点击事件都能正常地触发。

对了，先给大家看一下我的事件绑定代码：

HTML：

<ul>
    <li id="mainPage">首页</li>
    <li id="example">游戏示例</li>
    <li id="rules">游戏规则</li>
    <li id="download"><a href="./download/code.zip" download="spider.py">源码下载</a></li>
    <li id="about">关于本站</li>
</ul>

JavaScript：

function navigationInitialization() {
    document.getElementById("mainPage").onclick = mainPage
    document.getElementById("example").onclick = example
    document.getElementById("rules").onclick = rules
    // document.getElementById("download").onclick = download
    document.getElementById("about").onclick = about
}

寻找解决方法：

1、GPT

                a、修改了z-index

                        解决了部分问题，因为修改了z-index之后，我发现进入我的“游戏案例”后，导航栏  确实可以被点击了。但是点击回来之后，却无法再次点击游戏按钮，重新渲染进入界 （感觉很迷，我也不清楚为什么会这样）。        没有解决

                b、修改pointer-evnets

                        没有解决。

 2、百度

        （没有发现有用的建议）

        说法和GPT相似，可能是层叠样式的上下文混乱引起的。

3、苦思冥想

        怎么办，到这里的时候，我已经自闭了。

        因为这个问题让我摸不着头脑，因为如果是因为层叠样式的上下文混乱引起的，那么为什么的li的hover效果是可以被触发的，但是绑定在上面的按钮却不可以呢？

        

        怎么办呢？继续肝！

        观察发现，我的“源码下载”的按钮是可以被点击的，并且download的效果也是可以被触发的。这个按钮和其他的按钮有什么不一样的地方吗？

        有！在li里面有套了一个a，通过超链接来实现文件的下载。

        那我试试每个li都都套一个超链接是不是就可以了。修改了之后发现是可以的。我很高兴，但是突然发现了问题，我套了超链接标签a后，我每次点击都会发生网页的跳转，并且违背了我之前的想法：不进行网页的跳转，只进行JavaScript的渲染。所以还是失败了。

4、引入深思，解决问题

        上面的尝试，引起了我的思考，是不是JavaScript的问题？为什么我套了一个a标签，就可以了实现被点击了，为什么用JavaScript绑定的事件就无法触发呢？

        大胆（无理由）尝试，用标签的onclick属性绑定JavaScript函数，如图。竟然解决了！！！

<ul>
    <li id="mainPage" onclick="mainPage();">首页</li>
    <li id="example" onclick="example()">游戏示例</li>
    <li id="rules" onclick="rules()">游戏规则</li>
    <li id="download" onclick="download()"><a href="./download/code.zip" download="spider.py">源码下载</a></li>
    <li id="about" onclick="about()">关于本站</li>
</ul>

5、总结

        没太弄懂，感觉不可思议。

        可能是事件绑定失败吧，当时没有使用HTML 3D动画效果之前，我这样绑定都是没问题的。

        因为对JavaScript不太熟悉，也不敢多评论，不过希望解决问题的方法能够帮助到大家。