Öğeyi tıklanamaz hale getirin (arkasındaki şeyleri tıklayın)

92

Kullanıcı bir dokunmatik ekranı (mobil) kaydırırken bir sayfayı kaplayan sabit bir resmim var.

O görüntüyü "tıklanamaz" veya "pasif" veya her neyse yapmak istiyorum, böylece bir kullanıcı o görüntüye dokunup sürüklerse, arkasındaki sayfa sanki görüntü etkileşimi "engellemiyor" gibi kaymaya devam ediyor.

Mümkün mü? Gerekirse, ne demek istediğimi örnekleyen ekran görüntüleri sağlamaya çalışabilirim.

Teşekkürler!

— Hannebaumsaway
kaynak

181

CSS Ayarlama - pointer-events: noneresimle herhangi bir fare etkileşimini kaldırmalıdır. IE dışında hepsinde oldukça iyi destekleniyor.

İştepointer-events alabileceğiniz değerlerin tam listesi .

— Chris Brown
kaynak

2

Mükemmel! Daha pointer-eventsönce karşılaşmamıştım, tam da aradığım buydu. Teşekkür ederim!

— hannebaumsaway

1

@Dusty Kinda mantıklı, fare etkileşimlerini devre dışı bırakıyor, ancak fare etkileşimlerini istiyorsun. Özel kullanım durumunuz nedir? İşaretçi öğenin tıklanabilir olduğunu ima ettiği için sezgisel görünen bir UX perspektifinden. Bir JSFiddle'ı bir araya getirirseniz, bir bakabilirim.

— Chris Brown

@ChrisBrown imleç değiştirme biraz sarsıntı oldu. İşte jsfiddle.net/cxwvdos0 ile ortaya çıkardığım şeylerden birkaçı . Bir düğmeyi bir saniyeliğine devre dışı bırakmak ve imleci değiştirmemek biraz çılgınca. jQuery unbindve bindsanırım anonim işlevlerimi dönüştürmek istersem işe yarardı. Yine de cevabınız için teşekkürler!

— Dusty

mobil cihazlarda çalışmaz.

— Hamendra Sunthwal

17

CSS İşaretçi Olayları, bakmak istediğiniz şeydir. Sizin durumunuzda, işaretçi olaylarını "yok" olarak ayarlayın. Örnek için bu JSFiddle'a bakın ... http://jsfiddle.net/dppJw/1/

Simgeye çift tıklamanın yine de paragrafı tıkladığınızı söyleyeceğine dikkat edin.

div.child {
    ...    
    background: #fff;
    pointer-events: none //This line is the key!
}

— Terry
kaynak

1

Örnek için teşekkürler!

— hannebaumsaway

Tek tıklama * ve kod örneği (simgeye tıklama) FF 68.0'da benim için çalışmıyor.

— Andrew

3

JavaScript kullanmak istiyorsanız:

document.getElementById("x").style.pointerEvents = "none";

<a href="https://www.google.com" id="x" />Unclickable Google Link</a>
<br>
<a href="https://www.google.com" id="" />Clickable Google Link</a>

Snippet'i genişlet

— Husam Ebish
kaynak