alternatif properti css 'pointer-events' untuk IE

Saya memiliki menu navigasi drop-down di mana beberapa judul tidak boleh menavigasi ke halaman lain ketika diklik (judul ini membuka menu drop-down saat diklik) sementara yang lain harus menavigasi (ini tidak memiliki dropdown dan navigasi langsung). Namun, keduanya jenis telah hrefditentukan untuk mereka

Untuk mengatasi ini saya menambahkan css berikut untuk jenis judul sebelumnya

pointer-events: none;

dan itu berfungsi dengan baik. Tapi karena properti ini tidak didukung oleh IE, saya mencari beberapa solusi. Yang mengganggu adalah saya tidak memiliki akses dan hak istimewa untuk mengubah kode HTML dan JavaScript sepenuhnya.

Ada ide?

Pointer-events adalah hack Mozilla dan telah diterapkan di browser Webkit, Anda tidak dapat berharap melihatnya di browser IE selama jutaan tahun.

Namun ada solusi yang saya temukan:

Meneruskan Acara Mouse Melalui Lapisan

Ini menggunakan plugin yang menggunakan beberapa properti Javascript yang tidak dikenal / dipahami untuk mengambil acara mouse dan mengirimkannya ke elemen lain.

Ada juga solusi Javascript lain di sini .

Pembaruan untuk Oktober 2013 : rupanya datang ke IE di v11. Sumber . Terima kasih Tim.

Berikut ini adalah solusi lain yang sangat mudah diterapkan dengan 5 baris kode:

1. Abadikan peristiwa 'mousedown' untuk elemen teratas (elemen yang ingin Anda matikan dari peristiwa pointer).
2. Di 'mousedown' sembunyikan elemen atas.
3. Gunakan 'document.elementFromPoint ()' untuk mendapatkan elemen yang mendasarinya.
4. Perlihatkan elemen teratas.
5. Jalankan acara yang diinginkan untuk elemen yang mendasarinya.

Contoh:

//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;

});

Ada solusi untuk IE - gunakan inline SVG dan set pointer-events = "none" di SVG. Lihat jawaban saya di Cara membuat Internet Explorer mengemulasi pointer-events: tidak ada?

Perlu disebutkan bahwa khusus untuk IE, disabled=disabledberfungsi untuk tag anchor:

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

IE memperlakukan ini sebagai disabledelemen dan tidak memicu acara klik. Namun, disabledbukan atribut yang valid pada tag jangkar. Karenanya ini tidak akan berfungsi di browser lain. Bagi mereka pointer-events:nonediperlukan dalam styling.

UPDATE 1 : Jadi menambahkan aturan berikut terasa seperti solusi lintas-browser bagi saya

UPDATE 2 : Untuk kompatibilitas lebih lanjut, karena IE tidak akan membentuk style untuk anchor tag disabled='disabled', jadi mereka akan tetap terlihat aktif. Jadi, a:hover{}aturan dan gaya adalah ide yang bagus:

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

Bekerja pada Chrome, IE11, dan IE8.
Tentu saja, CSS di atas mengasumsikan tag anchor diberikandisabled="disabled"

Berikut ini adalah skrip kecil yang mengimplementasikan fitur ini (terinspirasi oleh artikel blog Shea Frederick yang disebutkan Kyle):

• Pointer Acara Polyfill .

Tutupi elemen yang menyinggung dengan blok tak terlihat, menggunakan elemen pseudo: :beforeatau:after

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

Dengan demikian Anda klik mendarat pada elemen induk. Tidak bagus, jika induknya dapat diklik, tetapi berfungsi dengan baik sebaliknya.

Saya menghabiskan hampir dua hari untuk menemukan solusi untuk masalah ini dan akhirnya saya menemukan ini.

Ini menggunakan javascript dan jquery.

(GitHub) pointer_events_polyfill

Ini bisa menggunakan plug-in javascript untuk diunduh / disalin. Cukup salin / unduh kode dari situs itu dan simpan sebagai pointer_events_polyfill.js. Sertakan javascript itu ke situs Anda.

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

Tambahkan skrip jquery ini ke situs Anda

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

Dan jangan lupa untuk memasukkan plug-in jquery Anda.

Berhasil! Saya bisa mengklik elemen di bawah elemen transparan. Saya menggunakan IE 10. Saya harap ini juga bisa berfungsi di IE 9 dan di bawah.

EDIT: Menggunakan solusi ini tidak berfungsi ketika Anda mengklik kotak teks di bawah elemen transparan. Untuk mengatasi masalah ini, saya menggunakan fokus ketika pengguna mengklik pada kotak teks.

Javascript:

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

JQuery:

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

Ini memungkinkan Anda mengetik teks ke dalam kotak teks.

Saya telah menemukan solusi lain untuk menyelesaikan masalah ini. Saya menggunakan jQuery untuk mengatur href-atribut ke javascript:;(bukan '', atau browser akan memuat ulang halaman) jika lebar jendela browser lebih besar dari 1'000px. Anda perlu menambahkan ID ke tautan Anda. Inilah yang saya lakukan:

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

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

Mungkin ini berguna untukmu.

Menggunakan OnClientClick = "return false;"

Anda juga bisa "tidak" menambahkan url di dalam <a>tag, saya melakukan ini untuk menu yang <a>digerakkan oleh tag dengan drop down juga. Jika tidak ada drop down maka saya tambahkan url tetapi jika ada drop down dengan <ul> <li>daftar saya hanya menghapusnya.

Saya menghadapi masalah serupa:

1. Saya menghadapi masalah ini dalam arahan, saya memperbaikinya menambahkan sebagai elemen induknya dan membuat pointer-events: tidak ada untuk itu

2. Perbaikan di atas tidak berfungsi untuk tag pilih, lalu saya menambahkan kursor: teks (yang saya inginkan) dan itu berhasil untuk saya

Jika diperlukan kursor normal, Anda dapat menambahkan kursor: default

Solusi terbaik:

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

Berjalan dengan sempurna di semua browser