css 'pointer-evenimente' proprietate alternative pentru IE

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:

1. Captura 'mousedown' eveniment pentru primul element (elementul pe care doriți să dezactivați indicatorul evenimente).
2. În 'mousedown' ascunde elementul de sus.
3. Folosi 'document.elementFromPoint()' pentru a obține elementul fundamental.
4. Afișați elementul de sus.
5. Executa evenimentul dorit pentru element de fond al sistemului.

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):

• Pointer Evenimente Polyfill.

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:

1. Am confruntat această problemă într-o directivă, am reparat-o adăugând o

   ca element părinte și de a face pointer-evenimente:niciunul pentru că

2. Cele de mai sus fix nu au de lucru pentru a selecta tag-ul, apoi am adăugat cursorul de text: (care a fost ceea ce am vrut) si a functionat pentru mine

Dacă un cursor normale este nevoie de tine ar putea adăuga cursor:default

Folosesc OnClientClick = "return false;"`

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 `

• lista am doar scoateți-l.

Cele mai bune soluții:

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

Ruleaza perfect pe toate browserele