点击事件不生效,点击不起作用,多半是元素被遮挡。css元素被遮挡,选择不到

本文介绍了解决JavaScript中点击事件失效的问题,通过调整CSS的z-index属性和使用pointer-events属性来确保点击事件能够正常触发。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

有过js控制点击不生效的时候吗,这时就要考虑你的元素是否被其他元素遮挡了。这里说的遮挡并不是看不到。而是能看到,却无法透过另一元素选中它。
可以试一下以下两种方案:
1、css调节z-index
首先要考虑的是更外层的元素遮挡了靠里层的元素。比如外层遮挡为一个div(.card)被遮挡的是一个input框为(.input-space)
这时就要把遮挡它的元素的css中的z-index调的比他要低,假设:外层遮挡的类名为:card,被遮挡的input的类名为:input-space。

.card{
    z-index:1;
}
.input-space{
    z-index:2;
}

2、写完之后看input框能不能选到(点击事件生不生效)。如果还是选不到(点击事件不生效),就在这个基础上为card再加一层css, pointer-events:none,此css以为鼠标事件对当前元素无效。

.card{
    pointer-events: none;
}

这样一来点击事件会直接略过卡片,所以就能直接选择到输入框了。
博客为原创,转载请附加此博客地址

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值