Zdarzenie Mouseover nie granuluje się na IE9 dla elementów podrzędnych, zdarzenie nie rozpoczyna się na IE8

Question

Dostosowujemy metodę opublikowaną tutaj highlight a DOM element on mouse over, like inspect does do NIE używaj jQuery.

Wpadliśmy z tego rozwiązania do tej pory: http://jsfiddle.net/pentium10/Q7ZQV/3/

Ten szwy pracować na Chrome i Firefox, ale nie działa zgodnie z oczekiwaniami na IE.

1. Na IE9 na przykład punktem kulminacyjnym nie występuje na drobne elementy, jak np slogan: javascript, html, dom lub górnej linii jak: chat, meta, faq

   Kiedy myszy na znaczniku div javascript wielka jest highligthed i to jest wrong i powinno być like we see in Firefox

2. na IE8 i 7 nie uruchamia się tak, że jest inny problem musimy rozwiązać

Answer 1

Okazuje się, że w IE elementy, które nie mają tła (tj. background: transparent) i zestawu Gradient filter, nie otrzymują zdarzeń myszy. Demo

To szczęśliwy zbieg okoliczności, ponieważ do nakładki używamy RGBa background colour, a jednym z obejść dla kolorów RGBa w IE jest filtr Gradient.

Ustalając te style na nakładce (dla IE):

background: transparent; 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; /* IE8 */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); /* IE6 & 7 */ 
zoom: 1; 

zdarzenia myszy przechodzą przez nakładkę i na elementach bazowych, tak drobne elementy wewnętrzne/są podświetlone poprawnie.

Inne kwestie, które są obecne w IE7/8:

• Podczas korzystania element.attachEvent nazwa zdarzenie musi być poprzedzona słowem "on":

  document.body.attachEvent('onmouseover', function(e) { ... }) 
  

• Aby znaleźć target of the event, musisz uzyskać dostęp do event.srcElement zamiast event.target.

• Jako wspomniany rodneyrehm, Array.indexOf nie jest obsługiwany.

Więc oto wersja rozwiązania, które również działa w IE 7-9: http://jsfiddle.net/jefferyto/Q7ZQV/7/

(BTW Podświetlenie jest złe dla elementów inline, które obejmują więcej niż jeden wiersz, np „zadawać własne pytanie "link w linii" Przeglądaj inne pytania ... ".)

Answer 2

Używając specjalnej procedury dla Internet Explorera (przetestowany w IE9, nie testowany w IE8), wymyśliłem this. Jednak nie jest jeszcze doskonały. Podczas przesuwania myszy wewnątrz tego samego elementu migotanie występuje, gdy procedura jest uruchamiana wiele razy (a czasami nakładka znika całkowicie). Mam nadzieję, że wkrótce to udoskonalę.

Routine:

• I specjalnie zaznaczone, jeśli przeglądarka to Internet Explorer i wykonano następujące czynności:
• I przypisane zdarzenie mousemove do funkcji, która używa document.elementFromPoint(x, y).
• Przypisałem mouseover do funkcji rozliczeń, która natychmiast usuwa nakładkę. (To powoduje migotanie i możliwe całkowite usunięcie nakładki, mimo że mysz jest nadal na elemencie.)

element z punktu Funkcja

function ep(e) 
{ 
    var ev = {target:document.elementFromPoint(e.clientX, e.clientY)}; 
    handler(ev); 
} 

Funkcja Clearing

function clear(e) 
{ 
    cur = null; 
    overlay.style.display='none'; 
} 

Zgłoszenie i sugestie są mile widziane. Nadal nad tym pracuję i opublikuję zaktualizowane linki JSFiddle.

Answer 3

Myślę, że znalazłem problem w twoim wdrożeniu. Ale zanim przejdziemy do tego, może chcesz wyleczyć globalnej-SCOPE-przecieku przedstawić w linii 45. Jest średnik, gdzie prawdopodobnie chcesz przecinek:

var target = e.target, 
    offset = findPos(target), 
    width = target.offsetWidth;//target.outerWidth(), 
    height = target.offsetHeight;//target.outerHeight(); 

Możesz być także zainteresowany znajomość Array#indexOf jest obsługiwana od IE9, więc ~no.indexOf(e.target) może zawieść w IE8 i poniżej.

Teraz twój problem. Aktualna przeglądarka (w tym Firefox) zna pointer-events:none. Nawet wsparcie dla IE10 to still unknown. Każda przeglądarka, która nie obsługuje zdarzeń pointeru, nigdy nie będzie mogła wywołać zdarzenia10 w elementach objętych przez Twoją nakładkę.

Dzięki IE7 + obsługującemu document.elementFromPoint() możesz połączyć się z mousemove, ukryć warstwę, wykryć element pod kursorem, w razie potrzeby zwolnić mouseover. Jeśli zejdziesz tą drogą, rozważ zdławienie swoich zdarzeń mousemove (patrz limit.js).

Coś takiego jak this.

Aktualizacja:

nie robiłem żadnego porównania wydajności document.elementFromPoint() vs pointer-events:none. Obecne przeglądarki (Firefox, Chrome, ...) radzą sobie z obydwoma, Internet Explorer może działać tylko z podejściem document.elementFromPoint(). Aby wszystko było proste, nie wdrożyłem alternatywnej trasy pointer-events:none dla nowoczesnych przeglądarek.

Answer 4

Można uniknąć zdarzenia myszy są przechwytywane przez nakładkę poprzez zmianę jego właściwości, a mianowicie poprzez to przejrzyste i opierając się na outline lub o wielkości korekty obliczeń, border:

background:transparent; 
outline:1px dotted red; 

Fiddle'd

Alternatywnie, możesz , a nie polegać na nakładce, ale zamiast tego przełączać klasę na samym elemencie za każdym razem, gdy "moused over". Jeśli buforujesz odniesienie do niego, możesz usunąć klasę po "wymyśleniu", spłukaniu, powtórzeniu. Pomówię z pomysłem na trochę więcej, żeby przekonać się, jak to jest możliwe.

Answer 5

Spojrzałem na twoje skrzypce i rozwinąłem wersję, która działa na IE8, to be found here. Jak się okazuje, indexOf, zwłaszcza w połączeniu z bitowym ~ jest czymś, co IE nie wydaje się być wszystkim, co lubi, więc najszybsza poprawka wydaje się być prosta for(i=0;i<no.length;i++){}.

Jak wskazano wcześniej, e.target nie będzie działać w IE, ponieważ JScript nazywa tę właściwość srcElement. Ma to sens, ponieważ zdarzenia IE zawsze pojawiają się w dokumencie, więc wszystkie zdarzenia mają źródło, a nie cel.

Największa różnica występuje w twoim CSS: znowu IE to ból: MS wierzy, że rgba nie jest dobre z jakiegoś powodu. Wydaje się, że wolą pisać CSS, że żaden człowiek na ziemi nie może zrozumieć:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0.3,startColorstr='#4c333333', endColorstr='#4c666666'); 

daje półprzezroczystą szarą nakładkę. Szczerze mówiąc, znalazłem ten kawałek mojej odpowiedzi here.

Jeśli chodzi o wydarzeniach wskaźnik, jedynej rundzie ten sposób, AFAIK, jest inny detektor zdarzeń, który obsługuje zdarzenie onclick:

function noClick(e) 
{ 
    e = e || window.event; 
    if (e.preventDefault) 
    { 
     e.preventDefault(); 
     e.stopPropagation(); 
     return false; 
    } 
    e.returnValue = false; 
    e.cancelBubble = true; 
    return false; 
} 

nadzieję, że to pomaga na swój sposób ...