JS小坑

Posted 2021-01-17 油炸冰淇淋

1、场景：需要写一个弹出框来容纳登录界面，类似于百度的登录框

　  问题：使用  display: none/block  进行弹出框的显示和隐藏，设立点击事件   onclick  进行触发，但是点击过后目标框闪烁了一下就消失        了

　　解决：在调用函数后加上 "return: false;"  即可解决。看图 ↓

      

      

　　如果还没解决，看看你是否给需要显示的元素包裹了父元素！

2、场景：一个按钮或者链接上方覆盖了另一层元素，导致下层按钮无法被点击

　  解决：首先会先到 z-index 来解决，但是z-index 有时候并不好使，我们还有更简单的做法  pointer-events: none;

　  将某个元素 pointer-events的值设置为 none ，那么该元素将不会捕获任何click事件，即不会成为鼠标事件的target。而是让事件穿过该元素到达下面的元素！即可解决上述问题。pointer-events的值只有两个我们能用到 即 auto（默认） 、none 。其他值只能用在SVG上，因为人家本来就是SVG的属性啊。看图 

      

3、场景：设置一个按钮或者span等元素添加点击事件，频繁点击会出现蓝色背景，看图

　　解决：1、 JS方法  document.onselectstart=new Function("return false");

　　　　　2、CSS方法body{} 添加以下代码：

    -webkit-user-select:none; 
    -moz-user-select:none; 
    -ms-user-select:none; 
    user-select:none;