满口金牙 2022-12-17 19:49 采纳率: 91.5%
浏览 111
已结题

e.preventDefault() 没效果,我用错了吗?

目的,禁止点击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()
        }
    })
})
  • 写回答

2条回答 默认 最新

  • CSDN专家-showbo 2022-12-17 20:00
    关注

    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>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 12月25日
  • 已采纳回答 12月17日
  • 创建了问题 12月17日

悬赏问题

  • ¥15 为什么apriori的运行时间会比fp growth的运行时间短呢
  • ¥15 帮我解决一下膳食平衡的线性规划模型的数据实例
  • ¥40 万年历缺少农历,需要和阳历同时显示
  • ¥250 雷电模拟器内存穿透、寻基址和特征码的教学
  • ¥200 比特币ord程序wallet_constructor.rs文件支持一次性铸造1000个代币,并将它们分配到40个UTXO上(每个UTXO上分配25个代币),并设置找零地址
  • ¥15 关于Java的学习问题
  • ¥15 如何使用chatgpt完成文本分类任务?
  • ¥15 已知速度v关于位置s的等式,怎么转化为已知位置求速度v的等式
  • ¥15 我有个餐饮系统,用wampserver把环境配置好了,但是后端的网页却进去,是为什么,能不能帮远程一下?
  • ¥15 R运行没有名称为"species"的插槽对于此对象类"SDMmodelCV"