5.21 fixed依旧附属父集且不能配合translate3d，模板字符串写法注意，Uncaught (in promise) DOMException，移动端click事件无效

1.1、今天在做吸顶效果的时候，父容器使用transform: translate3d(0, 100px, 0)偏移。子元素本想用fixed强制吸顶，结果发现子元素也竖直偏移100px,而尝试top发现不影响。
1.2、又发现，fixed一旦包裹在div内，它的z-index决定权只能交给父集。
即父集的z-index和translate3d绝对影响子集的position:fixed定位后的，层级和位置。而父集的top不影响

子元素

2、模板字符串和普通字符串写法是不一样的。

一张图，3个注意点。
首先，用JS给元素定义样式，不用模板字符串，必须加引号。
用模板字符串，不要加引号，且负数直接写在${}括号内。

3、Uncaught (in promise) DOMException 问题是第二次提出了，若报错不明显，如下，毫无提示。

若使用了h5控件，多半是控件的参数渲染没完成去强行解析数据，如audio的src还没渲染，直接使用audio的play方法，导致异常。

4、移动端click事件无效。解决方案杂烩：
1、首先判断，是否受事件冒泡影响。
2、网上说，ios微信的bug，需要给click的div增加cursor:pointer即可。
3、在div盒子同时绑定touch事件与click事件，而touch事件又加了prevent，它会优先执行且阻止div盒子的 click事件，所以要将div盒子变成a标签。
4、因为是移动端bug，故考虑不用click事件绑定，而是在touch中根据touchstart和touchend的e.timeStamp的时间间隔去考虑，是否触发点击事件的方法。
注：方案4pc端的无法触发点击事件，且触摸间隔不好把控。
5、若prevent的影响不大，则优先考虑移出touch事件的prevent方可，最大程度优化代码。且touchmove的触发会阻止click事件，非常友好。所以没大需求，还是不要touchstart.prevent了。