एक चयनकर्ता के साथ एक कंटेनर पर माउसलेव - इंटरनेट एक्सप्लोरर 10

Question

मैंने mouseleave और mouseenter ईवेंट को एक कंटेनर से जोड़ा है। इस कंटेनर-चुने और कुछ यादृच्छिक पाठ होता है, मैं कंटेनर पर मेरे माउस पारित और उसके बाद का चयन करें पर क्लिक करें, यहाँ क्रोम पर क्या होता है बनाम आईई 10 है:

क्रोम: वो क्या है mouseleave ट्रिगर नहीं है (मैं चाहते हैं)

आईई 10: mouseleave शुरू हो रहा है, (बुरा बुरा)

A demo can be found here

मैं एक क्रॉस ब्राउज़िंग समाधान की तलाश में हूं जो केवल एक ईवेंट ट्रिगर करेगा जब मेरा माउस कंटेनर और उसके बच्चों को नहीं चला रहा है।

Answer 1

मुझे डर है कि <select> टैग के साथ आदर्श क्रॉस ब्राउज़र समाधान संभव नहीं है क्योंकि ब्राउज़र और उनके संस्करण विकल्प के प्रतिपादन पर भिन्न होते हैं। उनमें से कुछ अपने अलक्ष्य योग्य जीयूआई और अन्य एचटीएमएल तत्वों का उपयोग करते हैं। इस मामले में सबसे अच्छा आप छुपा इनपुट के साथ कस्टम ड्रॉपडाउन मेनू कर सकते हैं।

बीटीडब्ल्यू। इस मामले में, माउसएन्टर/माउसलेव का बेहतर व्यवहार होता है और माउसओवर/माउसआउट

Answer 2

की तुलना में बुलबुले को रोकता है, यह मदद कर सकता है, ऐसा लगता है कि यह पहली बार ड्रॉपडाउन खोलने पर काम करता है।

document.getElementById('idforselect') 
    .addEventListener('mouseout', function(e) { 
    e.stopPropagation(); 
}); 

Answer 3

मैंने समाधान खोजने के लिए थोड़ा और जावास्क्रिप्ट जोड़ा, हालांकि यह सामान्य उपयोग के लिए आदर्श नहीं हो सकता है।

एकमात्र अजीब व्यवहार जो मैं पा सकता हूं वह यह है कि आईई पर यह तब तक नहीं बदला जाता जब तक कि चयनित तत्व धुंधला न हो जाए।

एचटीएमएल

<div id="parent"> 
    <div>fdgfd</div> 
    <div>content</div> 
    <select name="" id="selectId"> 
    <option value="">1</option> 
    <option value="">2</option> 
    <option value="">3</option> 
    <option value="">4</option> 
    <option value="">5</option> 
    </select> 
</div> 
<div id="result">out</div> 

जावास्क्रिप्ट

var selected = false; 
var toExit = false; 

function blur() { 
    selected = false; 
    if (toExit) { 
    document.getElementById('result').innerHTML = 'out' 
    toExit = false; 
    } 
} 

document.getElementById('parent') 
    .addEventListener('mouseleave', function() { 
    // Store the exit so it can be used after blur 
    toExit = true; 
    if (!selected) { 
     document.getElementById('result').innerHTML = 'out' 
    } 

}); 
document.getElementById('parent') 
    .addEventListener('mouseenter', function() { 
    toExit = false; 
    return document.getElementById('result').innerHTML = 'in' 
}); 

// Controls the selected state 
document.getElementById('selectId') 
    .addEventListener('blur', blur); 

document.getElementById('selectId') 
    .addEventListener('change', blur); 

document.getElementById('selectId') 
    .addEventListener('focus', function() { 
    selected = true; 
}); 

Answer 4

दुर्भाग्य से, यह संभव नहीं लागू करने के लिए mouseleave घटना व्यवहार ब्राउज़रों में एक ही हो रहा है। यह ब्राउज़र विशिष्ट कार्यान्वयन पर निर्भर करता है।

यह IE documentation के अनुसार मान्य काम करता है।

माउसलेव | onmouseleave घटना

जब उपयोगकर्ता ऑब्जेक्ट की सीमाओं के बाहर माउस पॉइंटर चलाता है तो आग लगती है।

अतिरिक्त जावास्क्रिप्ट कोड का उपयोग करके एक ही प्रभाव प्राप्त किया जा सकता है जो बच्चे वस्तुओं पर ट्रिगर किए गए ईवेंट को संभालेगा।

कृपया example देखें।

मैंने <select> ऑब्जेक्ट पर फोकस/धुंध घटनाओं के लिए कुछ सहायक चर और हैंडलर जोड़े हैं।

var isSelectFocussed=false; 
var inside = false; 

function onMouseOut() { 
    !isSelectFocussed && (document.getElementById('result').innerHTML = 'out'); 
} 

document.getElementById('parent') 
    .addEventListener('mouseleave', function() { 
    onMouseOut(); 
    inside = false; 
}) 
document.getElementById('parent') 
    .addEventListener('mouseover', function() { 
    document.getElementById('result').innerHTML = 'in'; 
    inside = true; 
}); 
document.querySelector('select') 
.addEventListener('focus', function() { 
    isSelectFocussed = true; 
}); 
document.querySelector('select') 
.addEventListener('blur', function() { 
    isSelectFocussed = false; 
    !inside && onMouseOut(); 
}); 

भी हो, यह <input> छिपा के साथ कस्टम लटकती उपयोग करने के लिए शायद आसान हो जाएगा।