【移動端】點選穿透 的五種解決方法
阿新 • • 發佈：2021-01-17
技術標籤：移動端
文章目錄
什麼是點選穿透
在觸發完
touchstart事件的時候緊接著觸發他父級元素的click事件
具體來看以下例子來了解什麼是點選穿透：
在點選關閉按鈕後關閉遮罩層併產生了點選穿透問題
以下是原始碼：
<script src="https://cdn.bootcss.com/holder/2.9.6/holder.min.js"></script>
<div class="gap"></div>
< * {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.swiper {
width: 80%;
height: 120px;
background: #999;
margin: 0 auto;
}
.gap {
height: 50px;
}
#nav {
width: 80%;
height: 100px;
margin: 0 auto;
display: flex;
}
.item {
overflow: hidden;
height: 60px;
width: 60px;
}
.item img {
border-radius: 50%;
}
#zhezhao {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: #000;
opacity: 0.5;
}
.content{
width:50%;
height:100px;
margin: 220px auto;
text-align: center;
padding-top:30px;
color:white;
}
解決方法
方法一
e.preventDefault();阻止預設行為
<script>
//獲取元素
var close = document.querySelector('#close');
var zhezhao = document.getElementById('zhezhao');
close.addEventListener('touchstart', function(e){
//隱藏
// display:none;
zhezhao.style.display = 'none';
// 解決點選穿透方法一
e.preventDefault();
});
</script>
方法二
使用 addEventListener 的第三個引數
<script>
//獲取元素
var close = document.querySelector('#close');
var zhezhao = document.getElementById('zhezhao');
close.addEventListener('touchstart', function(e){
//隱藏
zhezhao.style.display = 'none';
});
/*
給html頁面阻止預設行為
passive屬性是 addEventListener 的第三個引數
*/
document.documentElement.addEventListener('touchstart', function(e){
//阻止預設行為
e.preventDefault();
},{
passive:false // 使e.preventDefault 不失效
});
</script>
方法三（建議使用）
給你的最外層結構增加一個包裹元素 並使用 e.preventDefault(); 來阻止預設行為
<!-- 包裹元素 app -->
<div id="app">
<div class="gap"></div>
<div class="gap"></div>
<div class="swiper"></div>
<div class="gap"></div>
<div id="nav">
<div class="item"><a href="http://m.atguigu.com"><img data-src="holder.js/50x50" alt=""></a></div>
<div class="item"><a href="http://m.atguigu.com"><img data-src="holder.js/50x50" alt=""></a></div>
<div class="item"><a href="http://m.atguigu.com"><img data-src="holder.js/50x50" alt=""></a></div>
<div class="item"><a href="http://m.atguigu.com"><img data-src="holder.js/50x50" alt=""></a></div>
<div class="item"><a href="http://m.atguigu.com"><img data-src="holder.js/50x50" alt=""></a></div>
</div>
<div id="zhezhao">
<div class="content">
<div class="remind">充值成功</div>
<button id="close">關閉</button>
</div>
</div>
</div>
<script>
//獲取元素
var close = document.querySelector('#close');
var zhezhao = document.getElementById('zhezhao');
var app = document.querySelector('#app');
close.addEventListener('touchstart', function (e) {
//隱藏
zhezhao.style.display = 'none';
});
//增加一個包裹元素
app.addEventListener('touchstart', function(e){
e.preventDefault();
});
</script>
方法四
利用 location.href = this.dataset.href 來解決
把包裹圖片的a元素刪除，並用
data-href屬性 作用與圖片的包裹容器上，來存放圖片連結 ， 利用location.href = this.dataset.href來解決`
原始碼如下
<div id="app">
<div class="gap"></div>
<div class="gap"></div>
<div class="swiper"></div>
<div class="gap"></div>
<div id="nav">
<div class="item" data-href="http://www.baidu.com" data-test="abc"><img data-src="holder.js/50x50" alt=""></div>
<div class="item" data-href="http://www.jd.com"><img data-src="holder.js/50x50" alt=""></div>
<div class="item" data-href="http://www.taobao.com"><img data-src="holder.js/50x50" alt=""></div>
<div class="item" data-href="http://www.atguigu.com"><img data-src="holder.js/50x50" alt=""></div>
<div class="item" data-href="http://www.bilibili.com"><img data-src="holder.js/50x50" alt=""></div>
</div>
<div id="zhezhao">
<div class="content">
<div class="remind">充值成功</div>
<button id="close">關閉</button>
</div>
</div>
</div>
<script>
var tupian = document.querySelectorAll('.item');
for(var i=0;i<tupian.length;i++){
tupian[i].addEventListener('touchstart', function(){
//事件處理程式
// location.href = this.dataset.href;
// console.log(this.dataset.href);
// this.dataset.test getAttribute('data-href')
location.href = this.dataset.href;
});
}
//獲取元素
var close = document.querySelector('#close');
var zhezhao = document.getElementById('zhezhao');
var app = document.querySelector('#app');
close.addEventListener('touchstart', function (e) {
//隱藏
zhezhao.style.display = 'none';
});
//
</script>
方法五
使用定時器 setTimeout
<script>
//獲取元素
var close = document.querySelector('#close');
var zhezhao = document.getElementById('zhezhao');
close.addEventListener('touchstart', function (e) {
//隱藏
// display:none
setTimeout(function () {
zhezhao.style.display = 'none';
}, 400)
});
</script>