目的,禁止点击outDiv 以外的区域,
onMounted(() => {
const outDiv = document.getElementById('team-content') as HTMLDivElement
document.addEventListener('click', (e) => {
if (!outDiv.contains(e.target as HTMLElement)) {
console.log('permission_scheme>>>>>>>>>>>>>点了外面>>>>>', outDiv.parentElement)
e.preventDefault()
}
})
})
preventDefault是阻止默认行为，比如submit事件阻止表单提交。如果是阻止冒泡执行父容器绑定事件，应该用stopPropagation。
题主具体要实现什么？不允许点击除outDiv外的内容触发事件可以用pointer-events控制事件穿透
<style>
*{pointer-events:none}
#team-content{pointer-events:auto}
</style>
<div onclick="alert(this.innerHTML)">1111</div>
<div onclick="alert(this.innerHTML)">2222</div>
<div onclick="alert(this.innerHTML)">3333</div>
<div id="team-content" style="height:300px;border:solid 1px #ccc" onclick="alert('team-content')">
team-content，点击这里才会触发onclick事件
</div>
<div onclick="alert(this.innerHTML)">1111</div>
<div onclick="alert(this.innerHTML)">2222</div>
<div onclick="alert(this.innerHTML)">3333</div>