"İşaretçi olayları: yok" kullanırken CSS imleç özelliği ekleyin

Question 1

Belirli bir bağlantıyı devre dışı bırakmaya ve imleç stilini uygulamaya çalışıyorum ancak bu CSS komutu cursor: text;etkili olmayacak. İmleç her zaman varsayılandır. En son Firefox sürümünü kullanıyorum.

CSS:

pointer-events: none !important;
cursor: text;
color: Blue;

Question 2

Kullanımı pointer-events: none, o öğeyle olan tüm fare etkileşimlerini devre dışı bırakır . cursorÖzelliği değiştirmek isterseniz, değişiklikleri ana öğeye uygulamanız gerekir. Bağlantıyı bir öğeyle sarabilir ve cursorona özelliği ekleyebilirsiniz .

Örnek Burada

HTML

<span class="wrapper">
    <a href="#">Some Link</a>
</span>

CSS

.wrapper {
    position: relative;
    cursor: text;  /* This is used */
}
.wrapper a {
    pointer-events: none;
}

Yine de birkaç tarayıcı tutarsızlığı var. Bunun IE11'de çalışmasını sağlamak için, sözde bir öğeye ihtiyacınız var gibi görünüyor. Sözde öğe ayrıca metni FF'de seçmenize izin verir. İşin garibi, Chrome'daki metni onsuz seçebilirsiniz.

Güncellenmiş Örnek

.wrapper:after {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
}

Question 3

Orijinal sorudan bu yana epey uzun zaman geçti, ancak bu, herhangi bir sarmalama öğesi ve işaretçi olayları içermeyen imleç içermeyen çözümüm:

<!-- Add tabindex="-1" so that element cannot be reached by keyboard -->
<a href="url" class="disabled" tabindex="-1" onfocus="this.blur()">Disabled link</a>

CSS:

/* Adding cursor just works: */
.disabled {
    cursor: not-allowed;
}

/* Makes link non-clickable: */
.disabled:active {
    pointer-events: none;
}

CodePen Örneği

DÜZENLE:

Chrome, tabindex özniteliğine sahip öğelere (tabindex = "- 1" olsa bile) tıklamaya odaklanmaya başladı. En hızlı çözüm, onfocus="this.blur()"odağı kaldırmaktır.
Öğeye odaklanmayı önlemeniz gerekir, aksi takdirde enter tuşu ile etkinleştirilebilir

Question 4

Belirterek pointer-events:none, öğe ve imleç arasında fare etkileşimi olmadığını aktif olarak beyan ediyorsunuz. Bu nedenle bir imleci de olamaz - tüm fare davranışlarına görünmez .

Burada bulunacak kanıt .

Question 5

Kaldır pointer-events: none !important;. Bağlantıyı JavaScript kullanarak devre dışı bırakın:

anchorElement.onclick = function(){
  return false;
}

JavaScript bilmiyorsanız anchorElementDüğümün veya Öğenin kendisidir. Bir Öğe almanın en yaygın yolu, HTML idniteliğini kullanmaktır. Diyelim ki biz var:

<a id='whatever' href='#'>Text Here</a>

Kodunuz şunlar olabilir:

document.getElementById('whatever').onclick = function(){
  return false;
}

Düğümleri almanın başka yolları da vardır.

Question 6

Kullanım durumum, herhangi bir işaretçi olayı veya bir işaretçi olayına sahip herhangi bir ana öğe içermeyen sürüklenebilir bir öğeydi.

Bunu, yalnızca sürüklerken yakalayan bir imleci zorlayarak küresel bir stil uygulayarak çözdüm. (React ve stilize bileşenleri kullanıyorum, ancak aynı mantık vanilya js'ye de uygulanabilir).

const SetDraggingCursor = createGlobalStyle`
  * {
    cursor: grabbing !important;
  }
`;

// ...

{isDragging && <SetDraggingCursor />}

Question 7

başka bir div oluşturup bunu tam olarak son div'inizde konumlandırabilir ve aşağıdaki gibi bir css yapabilirsiniz:

.example{
    background-color: rgba(255, 255, 255, 0); //opacity:0
    z-index: 1;
    cursor: not-allowed;
}

Question 8

Sarmalayıcıdan ziyade, bu, içeriden alınan saf CSS ile de yapılabilir. (Bunu materyal web bileşeniyle kullanıyorum, böylece kod biraz daha karmaşık hale geliyor.)

button:disabled {
    > * {
        cursor: not-allowed;
        pointer-events: initial;
    }

    &::before {
        background-color: #fff0;
    }

    &::after {
        background-color: #fff0;
    }
}

<button>
    <svg .../>
</button>

Ben de denedim ::beforeve ::afterile button:disableddoğrudan, ama sadece gerçekleşmesi gelemedi ...