JQuery घटनाओं mouseenter आईई

Question

$(document).ready(function(){ 
    $('#outer').mouseenter(function(){ 
    console.log("mouse enter"); 
    }); 
    $('#outer').mousemove(function(){ 
    console.log("mouse move"); 
    }); 
}); 

<div style='width:800px;border:1px solid red' id="outer"> 
this is test 
</div> 

में MouseMove व्यवहार जब माउस फ़ायरफ़ॉक्स में div में प्रवेश किया, क्रोम mouseenter घटना आईई MouseMove घटना के मामले में माउस चाल से पहले सक्रिय हो रही है mouseenter से पहले सक्रिय हो रही है। क्या यह बग पता है? या वहाँ किसी अन्य तरीके से इतना है कि सभी ब्राउज़रों में एक ही तरह से व्यवहार कर सकते हैं

Answer 1

[Updated उत्तर]

इस के आसपास पाने के लिए दो तरीके हैं।

1) mousenter ईवेंट पर केवल mousemove ईवेंट को बाध्य करें ताकि सभी बाद की घटनाएं उसी क्रम में ठीक से आग लग जाएंगी। इसमें बहुत बाध्यकारी और बाध्यकारी शामिल है।

$(document).ready(function(){ 
    var outer_mousemove = function(){ console.log('mousemove') }; 

    $("#outer").hover(function(){ 
     console.log('mouseenter'); 
     // Attach the event listener only after 
     // Mouse enter has fired 
     $(this).mousemove(outer_mousemove); 
    }, function(){ 
     $(this).unbind('mousemove', outer_mousemove); 
    }); 
}); 

2) एक चर संग्रहीत करें, और केवल MouseMove घटनाओं जब स्थिति मैच को अंजाम। बहुत कम बाध्यकारी/unbinding इस तरह से (यह मैं इसे कैसे करना होगा अगर यह अपने प्रोजेक्ट थे):

$(document).ready(function(){ 
    var outer_mousemove = false; 

    $("#outer").hover(function(){ 
     console.log('mouseenter'); 
     outer_mousemove = true; 
    }, function(){ 
     console.log('mouseleave'); 
     outer_mousemove = false; 
    }).mousemove(function(){ 
     if(outer_mousemove){ 
     console.log('mousemove'); 
     } 
    }); 
}); 

[मूल उत्तर]

mouseenter jQuery के द्वारा बनाई गई एक विशेष घटना है जो क्यों है यह mousemove के बाद आग लग सकता है। क्या आप शायद चाहते mouseover है:

$(document).ready(function(){ 
    $('#outer').mouseover(function(e){ 
    if(e.target == this){ 
     console.log("mouse over"); 
    } 
    }).mousemove(function(){ 
    console.log("mouse move"); 
    }); 
}); 

:

$(document).ready(function(){ 
    $('#outer').mouseover(function(){ 
    console.log("mouse over"); 
    }).mousemove(function(){ 
    console.log("mouse move"); 
    }); 
}); 

इसके अतिरिक्त

, बच्चे तत्वों से कई माउसओवर घटनाओं प्राप्त करने से रखने के लिए, क्या आप वाकई केवल अपने वस्तु द्वारा उत्पन्न की घटनाओं पर कार्य कर रहे हैं बनाने के लिए परीक्षण कर सकते हैं

अंत में, मेरे जवाब में मैंने चुनिंदा $("#outer") को दो बार कॉल करने के बजाय चेनिंग (यानी 'माउसओवर()। Mousemove()') का उपयोग किया। यह सिर्फ आपके पृष्ठ को थोड़ा तेज़ बनाता है :)