两种实现点击'对话框'以外的区域,'对话框'消失的方法。
程序员文章站
2022-05-16 19:53:46
...
html:
<div class="wrap">
<div class="content">
</div>
</div>
第一种思路:当前点击的对象不是对话框本身,则让对话框消失
var wrap = document.getElementsByClassName('wrap')[0];
var content = document.getElementsByClassName('content')[0];
wrap.onclick = function(e){
if(e.target !== content){
wrap.style.display = 'none'
console.log('点的对话框以外')
}else{
console.log('点击的对话框')
}
}
结果:
点击'对话框':
点击'对话框'以外:
第二种思路:利用事件的target和currentTarget.
if(e.target !== e.currentTarget){
wrap.style.display = 'none';
console.log('点的对话框以外')
}else{
console.log('点击的对话框')
}
因为currentTaget表示你绑定事件的元素,是'对话框'以外的区域,而点击对话框,e.target为'对话框'本身,两者不是同一个元素!
上一篇: 百度JS自动推送_百度自动推送功能重新上线,如何使用?
下一篇: C++实现base64编码解码