माउसओवर इवेंट उप तत्वों के लिए आईई 9 पर नहीं बढ़ता है, आईई 8

Question

पर ईवेंट शुरू नहीं होता है हम highlight a DOM element on mouse over, like inspect does से पर पोस्ट की गई विधि को अनुकूलित कर रहे थे jQuery का उपयोग नहीं करते हैं।

हम अब तक इस समाधान के साथ आया था: http://jsfiddle.net/pentium10/Q7ZQV/3/

यह क्रोम और Firefox पर काम करने के लिए तेजी, लेकिन IE पर अपेक्षा के अनुरूप काम नहीं करता है।

1. IE9 उदाहरण के लिए मुख्य आकर्षण टैग लाइन जैसे जैसे छोटे तत्वों पर नहीं होती है पर: javascript, html, dom या की तरह शीर्ष पंक्ति: chat, meta, faq

   जब मैं जावास्क्रिप्ट टैग पर माउस बड़ा div highligthed है और इस wrong है और यह like we see in Firefox

2. IE8 पर और 7 यह शुरू नहीं करता है होना चाहिए, ताकि एक और समस्या हम

समाधान हो जाता है

Answer 1

ऐसा लगता है कि आईई, तत्वों कोई पृष्ठभूमि (अर्थात background: transparent) और Gradient filter सेट माउस घटनाओं प्राप्त नहीं होता है कि में। Demo

यह एक सुखद संयोग है, क्योंकि आप अपने ओवरले के लिए RGBa background colour का उपयोग कर रहे हैं और आईई में आरजीबीए रंगों के लिए कामकाज में से एक ग्रेडियेंट फ़िल्टर है।

(आईई के लिए) ओवरले पर इन शैलियों की स्थापना करके:

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; 

माउस घटनाओं, ओवरले के माध्यम से और अंतर्निहित तत्व पर भेजेंगे, ताकि आंतरिक/नाबालिग तत्वों को सही ढंग से प्रकाश डाला है।

अन्य मुद्दों है कि IE7/8 में मौजूद हैं:

• जब element.attachEvent का उपयोग कर, घटना नाम "पर" उपसर्ग के साथ किया जाना चाहिए:

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

• target of the event ढूंढने के लिए, आपको event.target के बजाय event.srcElement तक पहुंचने की आवश्यकता है।

• जैसा कि रॉडनेरहम ने उल्लेख किया है, Array.indexOf समर्थित नहीं है।http://jsfiddle.net/jefferyto/Q7ZQV/7/

  (btw हाइलाइटिंग इनलाइन तत्वों है कि एक से अधिक पंक्ति अवधि के लिए गलत है, उदाहरण के लिए "अपने प्रश्न पूछने:

तो यहाँ अपने समाधान का एक संस्करण है कि यह भी आईई 7-9 में काम करता है प्रश्न "लिंक" अन्य प्रश्न ब्राउज़ करें ... "लाइन।)

Answer 2

इंटरनेट एक्सप्लोरर (आईई 9 में परीक्षण, आईई 8 में परीक्षण नहीं) के लिए एक विशेष दिनचर्या का उपयोग करके, मैं this के साथ आया हूं। हालांकि, यह अभी तक सही नहीं है। माउस को उसी तत्व के अंदर ले जाने पर, झिलमिलाहट होती है क्योंकि दिनचर्या कई बार चलती है (और कभी-कभी ओवरले पूरी तरह से गायब हो जाती है)। मैं जल्द ही इसे पूरा करने की उम्मीद करता हूं।

नियमित:

• मैं विशेष रूप से जाँच की है, तो ब्राउज़र आईई था और निम्न क्रियाओं का प्रदर्शन किया:
• मैं एक समारोह document.elementFromPoint(x, y) का उपयोग करता है करने के लिए mousemove घटना सौंपा।
• मैंने mouseover को एक समाशोधन समारोह में सौंपा, जो तुरंत ओवरले को हटा देता है। प्वाइंट समारोह

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

  समाशोधन समारोह

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

  प्रतिक्रिया से (यह अस्थिर है और एक संभव पूरा ओवरले हटाने का कारण बनता है, भले ही माउस तत्व पर अब भी है।)

तत्व और सुझावों का स्वागत है। मैं अभी भी इस पर काम कर रहा हूं, और मैं अद्यतन जेएसफ़ीड लिंक पोस्ट करूंगा।

Answer 3

मुझे लगता है कि मुझे आपके कार्यान्वयन में समस्या मिली है।

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

तुम भी रुचि हो सकती है: लेकिन इससे पहले कि हम उस के लिए मिलता है, तो आप वैश्विक गुंजाइश-रिसाव आप लाइन 45 में मौजूद रहे एक अर्धविराम, जहां आप शायद एक अल्पविराम चाहते है की अपने आप को इलाज के लिए चाहते हो सकता है Array#indexOf को जानने में आईई 9 के बाद से समर्थित है इसलिए ~no.indexOf(e.target) IE8 और नीचे विफल हो जाएगा।

अब आपकी समस्या के लिए। वर्तमान ब्राउज़र (फ़ायरफ़ॉक्स समेत) pointer-events:none पता है। यहां तक ​​कि आईई 10 का समर्थन still unknown है। पॉइंटर-इवेंट्स का समर्थन नहीं करने वाला कोई भी ब्राउज़र कभी नहीं आपके ओवरले द्वारा कवर किए गए तत्वों पर mouseenter ईवेंट को आग लगा देगा।

साथ IE7 + का समर्थन document.elementFromPoint() आप mousemove करने के लिए बाध्य कर सकता है, परत को छिपाने, कर्सर नीचे तत्व का पता लगाने, आग mouseover यदि आवश्यक हो तो

। यदि आप इस सड़क पर जाते हैं, तो कृपया अपने mousemove ईवेंट थ्रॉटलिंग पर विचार करें (limit.js देखें)।

कुछ this की तरह कुछ।

अद्यतन:

मैं document.elementFromPoint() के किसी भी प्रदर्शन की तुलना बनाम pointer-events:none नहीं किया है। वर्तमान ब्राउज़र (फ़ायरफ़ॉक्स, क्रोम, ...) दोनों के साथ सौदा कर सकते हैं, इंटरनेट एक्सप्लोरर केवल document.elementFromPoint() दृष्टिकोण के साथ काम कर सकता है। चीजों को सरल रखने के लिए मैंने आधुनिक ब्राउज़र के लिए वैकल्पिक pointer-events:none मार्ग लागू नहीं किया।

Answer 4

आप बच सकते हैं माउस घटनाओं ओवरले द्वारा अपने गुणों को बदलने, अर्थात् आकार गणना समायोजन के साथ यह पारदर्शी बनाने और outline पर भरोसा या, द्वारा द्वारा रोके जाने, border:

background:transparent; 
outline:1px dotted red; 

Fiddle'd

वैकल्पिक रूप से, आप ओवरले पर भरोसा कर सकते हैं, लेकिन इसके बजाय जब भी "moused" तत्व पर तत्व को टॉगल कर सकते हैं। यदि आप इसके संदर्भ को कैश करते हैं, तो आप कक्षा को हटा सकते हैं जब "moused out", कुल्ला, दोहराना। मैं यह देखने के लिए थोड़ा और अधिक विचार करूँगा कि यह कितना व्यवहार्य है।

Answer 5

मैंने आपके पहेली पर एक त्वरित नज़र डाली, और आईई 8, to be found here पर काम करने वाले एक संस्करण को फोर्क किया। जैसा कि यह पता चला है, indexOf, विशेष रूप से बिटवाई ~ के साथ संयोजन में कुछ ऐसा लगता है कि आईई ऐसा सब शौकीन नहीं लगता है, इसलिए सबसे तेज़ फिक्स एक साधारण for(i=0;i<no.length;i++){} लगता है।

जैसा कि पहले बताया गया है, e.target आईई में काम नहीं करेगा, क्योंकि जेस्क्रिप्ट इस संपत्ति को srcElement कहता है। यह समझ में आता है, क्योंकि आईई घटनाएं हमेशा दस्तावेज़ तक बुलबुला होती हैं, इसलिए सभी घटनाओं का एक स्रोत होता है, बल्कि एक लक्ष्य होता है।

आपके सीएसएस में सबसे बड़ा अंतर पाया जाना चाहिए: फिर आईई एक दर्द है: एमएस का मानना ​​है कि rgba किसी कारण से अच्छा नहीं है। आप एक अर्द्ध पारदर्शी ग्रे ओवरले देता

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

: ऐसा लगता है वे सीएसएस के लेखन पसंद करते हैं कि पृथ्वी पर कोई मानव की भावना कर सकते हैं। ईमानदार होने के लिए, मुझे अपने उत्तर का यह टुकड़ा मिला।

यह सूचक घटनाओं, एक ही रास्ता इस दौर की बात आती है, AFAIK, एक और घटना श्रोता, कि 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; 
} 

आशा इस अपने रास्ते पर मदद करता है ...