1. 程式人生 > >點選事件不生效,點選不起作用,多半是元素被遮擋。css元素被遮擋,選擇不到

點選事件不生效,點選不起作用,多半是元素被遮擋。css元素被遮擋,選擇不到

有過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;
}

這樣一來點選事件會直接略過卡片,所以就能直接選擇到輸入框了。
部落格為原創,轉載請附加此部落格地址