Am un drop jos meniu de navigare, în care unele dintre titlu nu ar trebui să navigați la altă pagină atunci când a făcut clic(aceste titlul a deschide un meniu drop-down atunci când se face clic pe), în timp ce alții ar trebui să naviga (acestea nu trebuie vertical și să navigați direct).Cu toate acestea, ambele tipuri au "href" definite pentru a le
Pentru a rezolva acest lucru, am adăugat următoarele css pentru fosta tip de titluri
pointer-events: none;
și este de lucru bine.Dar deoarece această proprietate nu este acceptată de EXEMPLU, eu sunt în căutarea pentru unele de lucru în jurul valorii de. Enervant lucru este că eu nu't au acces și privilegiul de a schimba cod HTML și JavaScript complet.
Orice idei?
Pointer-evenimente este o Opera hack și în cazul în care acesta a fost implementat în browsere Webkit, puteți't aștepta pentru a vedea în browsere IE pentru încă un milion de ani.
Cu toate acestea, există o soluție am găsit:
Transmiterea Mouse-Ul Evenimente Prin Straturi
Aceasta foloseste un plugin care utilizează unele nu sunt bine cunoscute/înțeles proprietăți de Javascript pentru a lua mouse-ul de eveniment și trimite-l la un alt element.
Există, de asemenea, un alt Javascript soluție aici.
Actualizare pentru luna octombrie 2013: se pare că-l's vine să IE în v11. Sursa. Multumesc Tim.
Aici este o altă soluție, care este foarte ușor să pună în aplicare cu 5 linii de cod:
Exemplu:
//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;
});
Nu's o soluție pentru IE - utilizare inline SVG și a stabilit pointer-evenimente="nimic" în SVG. Vezi răspunsul meu în https://stackoverflow.com/questions/9385213/how-to-make-internet-explorer-emulate-pointer-eventsnone
L's de remarcat faptul că în special pentru IE, dezactivat=dezactivat
funcționează pentru anchor tag-uri:
<a href="contact.html" onclick="unleashTheDragon();" disabled="disabled">Contact</a>
IE tratează acest lucru ca pe un "handicap" element și nu declanșează faceți clic pe eveniment. Cu toate acestea, "handicap" nu este un atribut valid pe o etichetă ancoră. Prin urmare, aceasta a câștigat't de a lucra în alte browsere. Pentru ei pointer-evenimente:none
este necesară în styling.
UPDATE 1: Deci, adăugând următoarea regulă se simte ca o soluție cross-browser pentru mine
UPDATE 2: Pentru compatibilitatea în continuare, pentru că IE nu se va forma stiluri de etichete de ancorare cu handicap='cu handicap', deci tot vor <I>uite</I> active. Astfel,
a:hover{}` regula si styling este o idee bună:
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;
}
Lucru pe Chrome, IE11, și IE8.
Desigur, mai presus de CSS presupune anchor tag-uri sunt prestate cu handicap="cu handicap"`
Aici's un mic script de punere în aplicare această caracteristică (inspirat de Shea Frederick articol pe blog care Kyle mențiuni):
Mi-am petrecut aproape două zile pe găsirea de soluții pentru această problemă și am găsit acest lucru în trecut.
Acesta utilizează javascript și jquery.
(GitHub) pointer_events_polyfill
Acest lucru ar putea folosi un javascript plug-in pentru a fi descărcate/copiate.
Doar copy/descărcare codurile de la care site-ul și salvați-l ca pointer_events_polyfill.js
. Include javascript pentru site-ul tău.
<script src="JS/pointer_events_polyfill.js></script>
Adauga acest script jquery pentru site-ul tău
$(document).ready(function(){
PointerEventsPolyfill.initialize({});
});
Și don't uitați să includeți jquery plug-in.
Acesta funcționează! Nu pot faceți clic pe elementele sub element transparent. Am'm folosind IE 10. Sper că acest lucru poate, de asemenea, funcționează în IE 9 și mai jos.
EDIT: Folosind această soluție nu funcționează atunci când faceți clic pe casete de mai jos transparent element. Pentru a rezolva această problemă, eu folosesc de focalizare atunci când utilizatorul face clic pe caseta de text.
Javascript:
document.getElementById("theTextbox").focus();
JQuery:
$("#theTextbox").focus();
Acest lucru vă permite să tastați textul în caseta de text.
Acoperi ofensatoare elemente cu un invizibil bloc, folosind un pseudo-elementul: `:înainte de "sau": după
a:before {
//IE No click hack by covering the element.
display:block;
position:absolute;
height:100%;
width:100%;
content:' ';
}
Astfel,'re faceți clic pe terenuri pe elementul părinte. Nu e bine, dacă părintele se poate face clic, dar funcționează bine în caz contrar.
Am'am găsit o altă soluție pentru a rezolva această problemă. Eu folosesc jQuery pentru a seta "href" -atribut javascript:;
(nu ' ', sau browser vă va reîncărca pagina) daca fereastră a browser-ului lățimea este mai mare decât 1'000px. Ai nevoie să adăugați un ID de link-ul. Aici's ceea ce am'm a face:
// get current browser width
var width = $(window).width();
if (width >= 1001) {
// refer link to nothing
$("a#linkID").attr('href', 'javascript:;');
}
Poate l's util pentru tine.
M-am confruntat cu probleme similare:
Am confruntat această problemă într-o directivă, am reparat-o adăugând o
Puteți, de asemenea doar "nu" adăugați o adresă url în interiorul <a> tag, fac asta pentru meniuri care sunt
tag condus cu coborâșuri picătură la fel de bine. Dacă nu există picătură în jos, apoi am adăuga url-ul, dar dacă există coborâșuri picătură cu un `