IE için css 'pointer-events' özellik alternatifi

Diğerleri gezinmelidir (bunlar açılır ve doğrudan gezinmez), ancak bazı başlıkların tıklandığında diğer sayfaya gitmemesi gereken bir açılır menü var (bu başlık tıklandığında bir açılır menü açar). türleri hreftanımladı

Bunu çözmek için eski tip başlıklar için aşağıdaki css ekledim

pointer-events: none;

ve bu çalışıyor.Ancak bu özellik IE tarafından desteklenmiyor, ben bazı geçici çözüm arıyorum. Sinir bozucu şey, HTML ve JavaScript kodunu tamamen değiştirmek için erişim ve ayrıcalığım yok .

Herhangi bir fikir?

Pointer-events bir Mozilla hackidir ve Webkit tarayıcılarında uygulandığı yerde, bunu başka bir milyon yıl boyunca IE tarayıcılarında görmeyi bekleyemezsiniz.

Ancak bulduğum bir çözüm var:

Fare Olaylarını Katmanlardan İletme

Bu, fare olayını almak ve başka bir öğeye göndermek için Javascript'in iyi bilinmeyen / anlaşılmayan bazı özelliklerini kullanan bir eklenti kullanır.

Burada başka bir Javascript çözümü de var .

Ekim 2013 Güncellemesi : Görünüşe göre v11'de IE'ye geliyor. Kaynak . Teşekkürler Tim.

İşte 5 kod satırı ile uygulanması çok kolay olan başka bir çözüm:

1. Üst öğe (işaretçi olaylarını kapatmak istediğiniz öğe) için 'mousedown' olayını yakalayın.
2. 'Fareyle üzerine' üst öğeyi gizleyin.
3. Temel öğeyi almak için 'document.elementFromPoint ()' öğesini kullanın.
4. Üst öğeyi göster.
5. Temel öğe için istenen olayı yürütün.

Misal:

//This is an IE fix because pointer-events does not work in IE
$(document).on('mousedown', '.TopElement', function (e) {

    $(this).hide();
    var BottomElement = document.elementFromPoint(e.clientX, e.clientY);
    $(this).show();
    $(BottomElement).mousedown(); //Manually fire the event for desired underlying element

    return false;

});

IE için bir geçici çözüm vardır - satır içi SVG kullanın ve SVG'de pointer-events = "none" değerini ayarlayın. Benim cevap bakınız How Internet Explorer taklit işaretçi-olayları yapmak: none?

Özellikle IE disabled=disablediçin, çapa etiketleri için çalıştığını belirtmek gerekir :

<a href="contact.html" onclick="unleashTheDragon();" disabled="disabled">Contact</a>

IE bunu bir disabledöğe olarak ele alır ve click olayını tetiklemez. Ancak, disabledbağlantı etiketinde geçerli bir özellik değildir. Bu nedenle bu diğer tarayıcılarda çalışmaz. Onlar pointer-events:noneiçin stil gereklidir.

GÜNCELLEME 1 : Yani aşağıdaki kuralı eklemek bana çapraz tarayıcı çözümü gibi geliyor

GÜNCELLEME 2 : Daha fazla uyumluluk için, IE ile bağlantı etiketleri için stiller oluşturmayacağından disabled='disabled', hala aktif görüneceklerdir . Bu nedenle, a:hover{}kural ve stil iyi bir fikirdir:

a[disabled="disabled"] {
        pointer-events: none; /* this is enough for non-IE browsers */
        color: darkgrey;      /* IE */
    }
        /* IE - disable hover effects */   
        a[disabled="disabled"]:hover {
            cursor:default;
            color: darkgrey;
            text-decoration:none;
        }

Chrome, IE11 ve IE8 üzerinde çalışma.
Tabii ki, yukarıdaki CSS çapa etiketlerinindisabled="disabled"

İşte bu özelliği uygulayan küçük bir senaryo ( Kyle'ın bahsettiği Shea Frederick blog makalesinden esinlenmiştir ):

• İşaretçi Olayları Çoklu Dolgu .

Sorun teşkil eden öğeleri, sahte bir öğe kullanarak görünmez bir blokla örtün: :beforeveya:after

a:before {
//IE No click hack by covering the element.
  display:block;
  position:absolute;
  height:100%;
  width:100%;
  content:' ';
}

Böylece üst öğe üzerindeki toprakları tıklıyorsunuz. Ebeveyn tıklanabilirse, ancak iyi çalışırsa iyi değil.

Bu sorunun çözümünü bulmak için neredeyse iki gün geçirdim ve sonunda buldum.

Javascript ve jquery kullanır.

(GitHub) pointer_events_polyfill

Bu, indirilmesi / kopyalanması için bir javascript eklentisi kullanabilir. Kodları bu siteden kopyalayın / indirin ve olarak kaydedin pointer_events_polyfill.js. Bu javascript'i sitenize ekleyin.

<script src="JS/pointer_events_polyfill.js></script>

Bu jquery komut dosyalarını sitenize ekleyin

$(document).ready(function(){
    PointerEventsPolyfill.initialize({});
});

Ve jquery eklentinizi eklemeyi unutmayın.

İşe yarıyor! Şeffaf öğenin altındaki öğelere tıklayabilirim. IE 10 kullanıyorum. Umarım bu IE 9 ve altında da çalışabilir.

DÜZENLEME: Saydam öğenin altındaki metin kutularını tıklattığınızda bu çözümü kullanmak işe yaramaz. Bu sorunu çözmek için, kullanıcı metin kutusunu tıklattığında odak kullanıyorum.

JavaScript:

document.getElementById("theTextbox").focus();

JQuery:

$("#theTextbox").focus();

Bu, metni metin kutusuna yazmanıza olanak tanır.

Bu sorunu çözmek için başka bir çözüm buldum. Ben ayarlamak için jQuery kullanmak hrefiçin -attribute javascript:;(değil '' veya tarayıcı sayfası yeniden yüklenir) 1'000px büyüktür genişlik tarayıcı penceresinin eğer. Bağlantınıza bir kimlik eklemeniz gerekiyor. İşte yaptığım şey:

// get current browser width
var width = $(window).width();
if (width >= 1001) {

    // refer link to nothing
    $("a#linkID").attr('href', 'javascript:;'); 
}

Belki sizin için yararlıdır.

kullanım OnClientClick = "return false;"

Ayrıca sadece "değil" <a>etiketinin içine bir url ekleyebilirsiniz , ben de <a>açılır menüler ile tahrik etiketi menüler için bunu . Açılan yoksa, URL'yi eklerim, ancak bir <ul> <li>listeyle açılan çıkışlar varsa, yalnızca kaldırırım.

Benzer sorunlarla karşılaştım:

1. Bir yönergede bu sorunla karşı karşıya kaldım, üst öğesi olarak bir ekleme ve işaretçi olayları yapma düzeltildi: bunun için hiçbiri

2. Yukarıdaki düzeltme, seçim etiketi için işe yaramadı, sonra imleç ekledim : metin (istediğim buydu) ve benim için çalıştı

Normal bir imleç gerekiyorsa imleç ekleyebilirsiniz : varsayılan

En iyi çözüm:

.disabled{filter: alpha(opacity=50);opacity: 0.5;z-index: 1;pointer-events: none;}

Tüm tarayıcılarda mükemmel çalışır