pointer-events属性有很多值，但是对付浏览器来说，只有auto和none两个值可用。
个中auto属于默认值，none使得元素不作为鼠标的target事宜，也便是说当点击元素时，直接透过它，接下来我们看一个小的案例。
案例先容默认展示一个搜索栏
当搜索栏点击时，下方涌现对应组件，由于是根本案例下面由蓝色的DIV代替
下面是对应代码，业务剖析可以看对应视频解析
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>穿透属性</title> <link rel="stylesheet" href="http://at.alicdn.com/t/font_2772367_01hf7sd1ocaa.css"> <style> { margin: 0; padding: 0; } input{ width: 300px; height: 20px; } .history{ width: 300px; height: 100px; background-color: blue; / display: none; / } .icon-fangdajing{ font-size: 18px; position: absolute; left: 282px; top: 2px; pointer-events: none; } </style></head><body> <div class="search"> <input type="text" id="search"> <i class="icon iconfont icon-fangdajing"></i> <div class="history" id="history"></div> </div> <script> let search=document.getElementById("search") let history=document.getElementById("history") search.onclick=function(){ history.style.display="block" } search.onblur=function(){ history.style.display="none" } </script></body></html>
