Saya memiliki sebuah drop down menu navigasi di mana beberapa judul tidak harus menavigasi ke halaman lain ketika diklik(judul ini membuka menu drop-down ketika diklik) sementara yang lain harus menavigasi (ini tidak memiliki dropdown dan menavigasi langsung).Namun, kedua jenis memiliki href
yang ditetapkan untuk mereka
Untuk memecahkan masalah ini saya menambahkan css berikut untuk mantan jenis judul
pointer-events: none;
dan itu bekerja dengan baik.Tapi karena properti ini tidak didukung oleh IE, saya mencari beberapa pekerjaan di sekitar. Satu hal yang mengganggu adalah bahwa i don't memiliki akses dan hak istimewa untuk mengubah kode HTML dan JavaScript benar-benar.
Ada ide?
Pointer-peristiwa adalah Mozilla hack dan di mana itu telah dilaksanakan di browser Webkit, anda dapat't berharap untuk melihat di browser IE untuk satu juta tahun.
Namun ada solusi yang saya temukan:
Forwarding Mouse Peristiwa Melalui Lapisan
Ini menggunakan sebuah plugin yang menggunakan beberapa tidak diketahui/dipahami sifat dari Javascript untuk mengambil mouse acara dan mengirimkannya ke elemen yang lain.
Ada juga yang lain Javascript solusi di sini.
Update untuk bulan oktober 2013: rupanya itu's datang ke IE di v11. Sumber. Terima Kasih Tim.
Berikut ini adalah solusi yang sangat mudah untuk menerapkan dengan 5 baris kode:
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's solusi untuk IE - menggunakan inline SVG dan mengatur pointer-acara="none" dalam SVG. Lihat jawaban saya di https://stackoverflow.com/questions/9385213/how-to-make-internet-explorer-emulate-pointer-eventsnone
It's worth menyebutkan bahwa khusus untuk IE, disabled=cacat
bekerja untuk anchor tag:
<a href="contact.html" onclick="unleashTheDragon();" disabled="disabled">Contact</a>
YAITU memperlakukan ini sebagai sebuah cacat
elemen dan tidak memicu klik acara. Namun, keluarga
adalah tidak valid atribut pada tag anchor. Oleh karena itu ini tidak't bekerja di browser lain. Bagi mereka pointer-acara:none
adalah yang diperlukan dalam styling.
UPDATE 1: Jadi menambahkan mengikuti aturan terasa seperti cross-browser solusi untuk saya
UPDATE 2: Untuk lebih kompatibilitas, karena IE tidak akan membentuk gaya untuk anchor tag dengan disabled='keluarga'
, sehingga mereka akan masih melihat aktif. Dengan demikian, a:hover{}
aturan dan styling adalah ide yang baik:
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, di atas CSS mengasumsikan tag anchor yang diberikan dengan disabled="keluarga"
Berikut ini's sebuah script kecil menerapkan fitur ini (terinspirasi oleh Shea Frederick artikel blog menyebutkan bahwa Kyle):
Aku menghabiskan waktu hampir dua hari untuk menemukan solusi untuk masalah ini dan saya menemukan ini pada akhirnya.
Ini menggunakan javascript dan jquery.
(GitHub) pointer_events_polyfill
Ini bisa menggunakan javascript, plug-in untuk didownload/disalin.
Hanya copy/download kode dari situs tersebut dan menyimpannya sebagai pointer_events_polyfill.js
. Seperti yang javascript untuk situs anda.
<script src="JS/pointer_events_polyfill.js></script>
Tambahkan script jquery untuk situs anda
$(document).ready(function(){
PointerEventsPolyfill.initialize({});
});
Dan don't lupa untuk menyertakan jquery plug-in.
Ia bekerja! Saya bisa klik elemen di bawah transparan elemen. I'm menggunakan IE 10. Saya berharap hal ini juga dapat bekerja di IE 9 dan di bawah ini.
EDIT: Menggunakan solusi ini tidak bekerja ketika anda meng-klik kotak teks di bawah transparan elemen. Untuk memecahkan masalah ini, saya menggunakan fokus ketika pengguna mengklik pada textbox.
Javascript:
document.getElementById("theTextbox").focus();
JQuery:
$("#theTextbox").focus();
Ini memungkinkan anda mengetik teks ke dalam kotak teks.
Penutup menyinggung unsur-unsur yang tak terlihat blok, menggunakan pseudo element: :sebelum
atau :setelah
a:before {
//IE No click hack by covering the element.
display:block;
position:absolute;
height:100%;
width:100%;
content:' ';
}
Dengan demikian anda're klik mendarat di elemen induk. Tidak baik, jika orang tua dapat diklik, tetapi bekerja dengan baik jika.
I've menemukan solusi lain untuk mengatasi masalah ini. Saya menggunakan jQuery untuk mengatur href
-atribut javascript:;
(tidak ' ', atau browser akan memuat ulang halaman) jika lebar jendela browser yang lebih besar dari 1'000px. Anda perlu untuk menambahkan ID untuk link anda. Berikut ini's apa yang saya'm lakukan:
// get current browser width
var width = $(window).width();
if (width >= 1001) {
// refer link to nothing
$("a#linkID").attr('href', 'javascript:;');
}
Mungkin itu's berguna untuk anda.
Saya menghadapi masalah yang sama:
Saya menghadapi masalah ini dalam direktif, saya tetap menambahkan
Anda juga dapat hanya "tidak" tambahkan url di dalam <a>
tag, saya melakukan ini untuk menu-menu yang <a>
tag didorong dengan drop down juga. Jika tidak ada drop down kemudian saya tambahkan url tapi jika ada drop down dengan <ul> <li>
daftar aku hanya menghapusnya.