How to prevent clickthrough and its application

What is click through

When touchstarttriggered 300ms, a clickdefault behavior is triggered internally.

Example:

<!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>Document</title>
    <style>
      * {
      
      
        margin: 0;
        padding: 0;
      }
      .box {
      
      
        background-color: aqua;
        width: 95vw;
        height: 46vw;
        margin: auto;
        border: 1px solid black;
      }
      #mask {
      
      
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        line-height: 120px;
        background-color: rgba(0, 0, 0, 0.4);
        text-align: center;
        display: none;
      }
    </style>
  </head>

  <body>
    <div id="mask">轻触关闭遮罩层</div>
    <div class="box"></div>
    <button id="btn">弹出遮罩层</button>
    <script>
      const box = document.querySelector('.box');
      box.addEventListener('click', () => {
      
      
        alert('box is clicked');
      });
      const mask = document.querySelector('#mask');
      document.querySelector('#btn').addEventListener('click', () => {
      
      
        mask.style.display = 'block';
      });
      mask.addEventListener('touchstart', (e) => {
      
      
        e.target.style.display = 'none';
      });
    </script>
  </body>
</html>

insert image description here
Touch to close the mask layer and find that the click event of the box is also triggered .

prevent click through

Prevent the default behavior, you can prevent click through

mask.addEventListener('touchstart',(e)=>{
    
    
   e.preventDefault() // 阻止默认事件后，将不再触发触摸后的点击事件
   e.target.style.display='none'
})

Realize click through

Application: Hide the default drop-down arrow of select, customize the icon icon, and find that the click icon options do not appear. At this time, you need to use click penetration to add styles to the icon element pointer-events: none;.

<div  class="select-box">
	<select id="selectLevel1" class="type-select-one" >
	</select>
	<i class="iconfont select-icon">&#xe607;</i>
</div>

.select-box {
    
    
	position: relative;
}
.type-select-one {
    
    
	width: 90%; 
	height: 84px;
	padding-left:12px;
	border: 1px solid #939393;
	appearance: none;
	outline: none;
	font-size: 50px;
}
.select-icon {
    
    
	position: absolute;
	top: 20px;
	right: 68px;
	width: 40px;
	height: 50px;
	color: #939393;
	font-size: 46px;
	pointer-events: none;
}