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

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 依据报错在原代吗格式的基础上解决问题
  • ¥15 在虚拟机中安装flash code
  • ¥15 单片机stm32f10x编写光敏电阻调节3.3伏大功率灯亮度(光强越大灯越暗,白天正常光强灯不亮,使用ADC,PWM等模块)望各位找一下错误或者提供一个可实现功能的代码
  • ¥20 verilog状态机方法流水灯
  • ¥15 pandas代码实现不了意图
  • ¥15 GD32H7 从存储器到外设SPI传输数据无法重复启用DMA
  • ¥25 LT码在高斯信道下的误码率仿真
  • ¥45 渲染完成之后将物体的材质贴图改变,自动化进行这个操作
  • ¥15 yolov5目标检测并显示目标出现的时间或视频帧
  • ¥15 电视版的优酷可以设置电影连续播放吗?