माउसओवर और माउसेंटर घटनाओं के बीच अंतर क्या है?

Question

मैंने हमेशा mouseoverईवेंट का उपयोग किया है , लेकिन मैंने पाया jQuery प्रलेखन को पढ़ते हुए mouseenter। वे वास्तव में एक ही कार्य करने लगते हैं।

क्या दोनों के बीच अंतर है, और यदि ऐसा है तो मुझे उनका उपयोग कब करना चाहिए?
( mouseoutबनाम के लिए भी लागू होता है mouseleave)।

Answer 1

आप निम्न उदाहरण को jQuery के डॉक्टर पृष्ठ से आज़मा सकते हैं । यह एक अच्छा सा, इंटरैक्टिव डेमो है जो इसे बहुत स्पष्ट बनाता है और आप वास्तव में अपने लिए देख सकते हैं।

var i = 0;
$("div.overout")
  .mouseover(function() {
    i += 1;
    $(this).find("span").text("mouse over x " + i);
  })
  .mouseout(function() {
    $(this).find("span").text("mouse out ");
  });

var n = 0;
$("div.enterleave")
  .mouseenter(function() {
    n += 1;
    $(this).find("span").text("mouse enter x " + n);
  })
  .mouseleave(function() {
    $(this).find("span").text("mouse leave");
  });

div.out {
  width: 40%;
  height: 120px;
  margin: 0 15px;
  background-color: #d6edfc;
  float: left;
}

div.in {
  width: 60%;
  height: 60%;
  background-color: #fc0;
  margin: 10px auto;
}

p {
  line-height: 1em;
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="out overout">
  <span>move your mouse</span>
  <div class="in">
  </div>
</div>

<div class="out enterleave">
  <span>move your mouse</span>
  <div class="in">
  </div>
</div>

संक्षेप में, आप देखेंगे कि जब आप अपने बच्चे या माता-पिता के तत्व से आ रहे होते हैं, तो एक माउस ओवर ईवेंट एक तत्व पर होता है - लेकिन एक माउस एंटर ईवेंट तभी होता है जब माउस इस तत्व के बाहर से इस तत्व की ओर बढ़ता है।

या जैसे mouseover()डॉक्स इसे डालते हैं:

[ .mouseover()] घटना बुदबुदाहट के कारण कई सिरदर्द हो सकते हैं। उदाहरण के लिए, जब माउस पॉइंटर इस उदाहरण में इनर एलिमेंट पर चलता है, तो माउसओवर ईवेंट उस पर भेजा जाएगा, फिर आउटर तक ट्रिकल करें। यह हमारे बाध्य माउसओवर हैंडलर को इनोपपोर्ट्यून समय पर ट्रिगर कर सकता है। .mouseenter()एक उपयोगी विकल्प के लिए चर्चा देखें ।

Comments

यह सच नहीं है कि mouseenter"केवल तब होता है जब माउस मूल तत्व से तत्व तक जाता है"। घटना तब होती है जब माउस तत्व के बाहर होने से उसके अंदर बदल जाता है। इससे कोई फर्क नहीं पड़ता कि माउस किस तत्व से आया है। यह सच है कि माउस अक्सर माता-पिता से आएगा, लेकिन हमेशा नहीं। जैसे, यदि माता-पिता के पास कोई गद्दी या सीमा नहीं है, तो माउस सीधे दादा-दादी से प्रवेश कर सकता है, और mouseenterफिर भी आग लगाएगा। वास्तव में, यह व्यूपोर्ट के बाहर से तत्व में प्रवेश कर सकता है (यदि तत्व किनारे पर सही है) और घटना अभी भी आग है।

— कॉलम

DEMO सबसे अच्छा स्पष्टीकरण है;)

— लकीलोके

असली के लिए, बस डेमो के साथ चारों ओर खेलते हैं।

— केविन व्हीलर

Answer 2

माउसओवर और माउससेल , बुदबुदाहट की घटना पर प्रतिक्रिया नहीं करते हैं, जबकि माउसओवर और माउसआउट करते हैं ।

यहां एक लेख है जो व्यवहार का वर्णन करता है।

Comments

यह इसे पूरी तरह से समझाता है: bl.ocks.org/mbostock/5247027 माउसओवर हर बार जब यह घटना बुदबुदाती है, तो कंटेनर के भीतर से निकाल दिया जाता है।

— राफेल एम्सहॉफ

Answer 3

जैसा कि इन सवालों के साथ अक्सर सच होता है, Quirksmode का सबसे अच्छा जवाब है ।

मुझे लगता है कि, क्योंकि jQuery के लक्ष्यों में से एक है चीजों को ब्राउज़र को अज्ञेयवादी बनाना, कि किसी भी घटना के नाम का उपयोग करने से एक ही व्यवहार शुरू हो जाएगा। संपादित करें: अन्य पदों के लिए धन्यवाद, अब मैं देखता हूं कि ऐसा नहीं है

Answer 4

$(document).ready(function() {
$("#outer_mouseover").bind
("Mouse Over Mouse Out",function(event){
console.log(event.type," :: ",this.id);})
$("#outer_mouseenter").bind
("Mouse enter Mouse leave",function(event){
console.log(event.type," :: ",this.id);})
 });

Comments

यदि आपके तत्व में कोई बाल तत्व नहीं है, लेकिन यदि तत्व में बच्चे हैं, तो जोड़े काफी अलग व्यवहार करते हैं। संक्षेप में, यदि आप अपने माउस को एक तत्व में और फिर उसके बच्चे में पास करते हैं, तो माउसओवर / माउसआउट दोनों में आग लग जाएगी, जबकि केवल माउसेंटर में आग लग जाएगी क्योंकि आपका माउस अभी भी तकनीकी रूप से तत्व के भीतर है।

— नवीद