जेकरी माउसएंटर () बनाम माउसओवर ()

Question

इसलिए हाल ही में उत्तर दिए गए प्रश्न को पढ़ने के बाद मैं स्पष्ट नहीं हूं कि क्या मैं वास्तव में mouseenter()और के बीच के अंतर को समझता हूं mouseover()। पोस्ट में कहा गया है

ऊपर टहलना():

एक तत्व में प्रवेश करने पर आग लग जाएगी और जब भी कोई भी मूवमेंट तत्व के भीतर होता है।

Mouseenter ():

एक तत्व में प्रवेश करने पर आग लग जाएगी।

मैं एक ऐसी बेला के साथ आया, जो दोनों का उपयोग करती है और वे काफी समान प्रतीत होती हैं। क्या कोई मुझे दोनों के बीच का अंतर समझा सकता है?

मैंने JQuery की परिभाषाओं को पढ़ने की भी कोशिश की है, दोनों एक ही बात कहते हैं।

माउस पॉइंटर को तत्व में भेजा जाता है जब माउस पॉइंटर तत्व में प्रवेश करता है

जब माउस पॉइंटर तत्व में प्रवेश करता है, तो माउसेंटर घटना एक तत्व को भेजी जाती है।

क्या कोई कृपया एक उदाहरण के साथ स्पष्ट कर सकता है?

Comments

प्रलेखन में डेमो यह काफी अच्छी तरह से दिखाता है।

— फेलिक्स क्लिंग

यह ध्यान देने योग्य है कि माउसइंटर और मूसलीवेट केवल IE में अन्य घटनाओं में स्वामित्व वाली घटनाएँ थीं और jQuery द्वारा अन्य ब्राउज़रों में उत्सर्जित की गईं (वे अब प्रकट होते हैं हालांकि अभी भी अन्य ब्राउज़रों में लागू नहीं हुई हैं। देखें quirksmode.org/dom/events/mouseover.html )

— रसम कैम

के संभावित डुप्लिकेट क्या माउसओवर और mouseenter घटनाओं के बीच का अंतर है?

— कास्पर ली

Answer 1

जब आपके लक्ष्य तत्व में बाल तत्व होते हैं तो आप व्यवहार देखते हैं:

http://jsfiddle.net/ZCWvJ/7/

हर बार जब आपका माउस बाल तत्व में प्रवेश करता है या छोड़ता है, तो mouseoverउसे ट्रिगर किया जाता है, लेकिन नहीं mouseenter।

$('#my_div').bind("mouseover mouseenter", function(e) {
  var el = $("#" + e.type);
  var n = +el.text();
  el.text(++n);
});

#my_div {
  padding: 0 20px 20px 0;
  background-color: #eee;
  margin-bottom: 10px;
  width: 90px;
  overflow: hidden;
}

#my_div>div {
  float: left;
  margin: 20px 0 0 20px;
  height: 25px;
  width: 25px;
  background-color: #aaa;
}

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

<div>MouseEnter: <span id="mouseenter">0</span></div>
<div>MouseOver: <span id="mouseover">0</span></div>

<div id="my_div">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Comments

@psychobrm - नहीं, इन दो डेमो के साथ खेलते हैं जो इस mouseleaveघटना को भी ट्रैक करते हैं : jsfiddle.net/ZCWvJ/232 jsfiddle.net/ZCWvJ/233 जहां से अधिक दर्ज करें + छोड़ दें, तो ओवर के लिए गिनती का योग होगा। दर्ज करने और छोड़ने के लिए मायने रखता है।

— gilly3

के var n = + el.text();बजाय लिखने के लिए एक विशिष्ट कारण है var n = el.text();? मैं सिर्फ जिज्ञासा के लिए पूछ रहा हूं।

— फ्रेड्रिक गॉस

@FredrickGauss - मैं एक नंबर +से लौटे स्ट्रिंग का उपयोग करने के लिए ऑपरेटर का उपयोग कर रहा हूं el.text()। क्या मुझे करने की आवश्यकता थी? इस मामले में, अगला बयान जो उपयोग करता है nवह भी एक संख्या के लिए बाध्य करेगा। तो, मैंने इसका उपयोग क्यों किया? मुझे यकीन नहीं है ... यह 2 साल पहले था। यह एक अच्छी आदत है। यह मेरा इरादा स्पष्ट करता है। संभवतः मैं मूल रूप n + 1से मेरे बचाने से पहले था , लेकिन अपने कोड को 2 वर्णों से छोटा करने और बस उपयोग करने का निर्णय लिया ++n। एक संख्या के लिए ज़बरदस्ती नहींn + 1 करेगा , बल्कि इसके परिणामस्वरूप एक स्ट्रिंग के लिए बाध्य करेगा , जैसे कि । n10111111

— gilly3

@ gilly3 - मन में अपनी यात्रा के विस्तृत विवरण के लिए धन्यवाद।

— फ्रेड्रिक गॉस

@ gilly3 अच्छा सारांश, लेकिन एक मामूली सुधार: "या एक बाल तत्व छोड़ता है" होना चाहिए "या एक बाल तत्व छोड़ देता है, यह देखते हुए कि बच्चे और माता-पिता के बीच एक अंतर है। आपके फील में एक मार्जिन / पैडिंग है, और इस तरह यह सच है। जब भी आप बाल तत्व को छोड़ते हैं तो आपको एक माउसओवर इवेंट मिलता है, लेकिन इसे बिना किसी पैडिंग / मार्जिन के साथ आज़माएं, और आपको यह ईवेंट मिल जाएगा।

— इज़राइल

Answer 2

यह मेरे द्वारा पाए गए सबसे अच्छे उदाहरणों में से एक है:

• mouseenter
• ऊपर टहलना
• mouseout
• mouseleave

http://bl.ocks.org/mbostock/5247027

Comments

उदाहरण बहुत अच्छा है, लेकिन आपको अपना जवाब थोड़ा और अधिक तैयार करने की आवश्यकता है ताकि इसे उखाड़ा जा सके। याद रखें कि आप एक प्रश्न का उत्तर देने की कोशिश कर रहे हैं ... यदि आपके पास केवल लिंक है तो शायद एक टिप्पणी अधिक उपयुक्त होगी। यदि आप प्रतिष्ठा के कारण अभी तक टिप्पणी नहीं कर सकते हैं, तो कुछ हासिल करें और बाद में करें।

— scristalli

वास्तव में, मुझे वास्तव में यह उत्तर पसंद है। प्रश्नकर्ता ने पहले से ही माउसओवर और माउसएंटर की परिभाषा दी है। वे एक उदाहरण के लिए पूछ रहे थे, और यह उदाहरण दर्शाता है कि वे यहां के अन्य उदाहरणों की तुलना में कितना बेहतर काम करते हैं।

— patorjk

gilly3 के उत्तर में एक दोष है (मेरी टिप्पणी देखें)। भले ही यह अच्छी तरह से संरचित नहीं है, यह उत्तर एक बेहतर संसाधन की ओर इशारा करता है।

— इज़राइल

Answer 3

यद्यपि वे उसी तरह से काम करते हैं, हालांकि, mouseenterघटना केवल तब चलती है जब माउस पॉइंटर चयनित तत्व में प्रवेश करता है । यदि एक माउस पॉइंटर किसी भी बच्चे के तत्वों में प्रवेश करता है, तो यह mouseoverघटना शुरू हो जाती है ।

Answer 4

Jquery प्रलेखन पृष्ठ के नीचे उदाहरण कोड और डेमो देखें:

http://api.jquery.com/mouseenter/

... माउसओवर तब फायर करता है जब पॉइंटर बच्चे के तत्व में चला जाता है, जबकि माउसएंटर तब ही फायर करता है जब पॉइंटर बाध्य तत्व में चला जाता है।

Answer 5

Mouseenter घटना अलग से माउसओवर तरीके से हैंडल घटना उत्साह से भरा हुआ । Mouseenter घटना, केवल चलाता है इसके हैंडलर जब माउस तत्व में प्रवेश करती है यह करने के लिए, स्वाभाविक है नहीं वंशज । देखें: https://api.jquery.com/mouseenter/

mouseleave घटना अलग से mouseout तरीके से हैंडल घटना उत्साह से भरा हुआ । Mouseleave घटना, केवल चलाता है इसके हैंडलर जब माउस तत्व छोड़ देता है इसे करने के लिए, स्वाभाविक है नहीं वंशज । देखें: https://api.jquery.com/mouseleave/

Answer 6

यह उदाहरण मूसमव , माउसेंटर और माउसओवर घटनाओं के बीच के अंतर को प्रदर्शित करता है :

https://jsfiddle.net/z8g613yd/

HTML:

<div onmousemove="myMoveFunction()">
    <p>onmousemove: <br> <span id="demo">Mouse over me!</span></p>
</div>

<div onmouseenter="myEnterFunction()">
    <p>onmouseenter: <br> <span id="demo2">Mouse over me!</span></p>
</div>

<div onmouseover="myOverFunction()">
    <p>onmouseover: <br> <span id="demo3">Mouse over me!</span></p>
</div>

सीएसएस:

div {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    margin: 10px;
    float: left;
    padding: 30px;
    text-align: center;
    background-color: lightgray;
}

p {
    background-color: white;
    height: 50px;
}

p span {
    background-color: #86fcd4;
    padding: 0 20px;
}

जे एस:

var x = 0;
var y = 0;
var z = 0;

function myMoveFunction() {
    document.getElementById("demo").innerHTML = z += 1;
}

function myEnterFunction() {
    document.getElementById("demo2").innerHTML = x += 1;
}

function myOverFunction() {
    document.getElementById("demo3").innerHTML = y += 1;
}

• onmousemove : हर बार माउस पॉइंटर को div एलिमेंट पर ले जाया जाता है।
• onmouseenter : केवल तब होता है जब माउस पॉइंटर div तत्व में प्रवेश करता है।
• onmouseover : तब होता है जब माउस पॉइंटर डिव तत्व में प्रवेश करता है, और इसके बाल तत्व (पी और स्पैन)।

Comments

किसी तरह से jsfiddle को यह कहते हुए तोड़ दिया जाता है कि फफूंद अपरिभाषित हैं - मैंने सिर्फ forked किया और सभी js को <script> jsfiddle.net/orc8empd पर

— godblessstrawberry

Answer 7

पुराना सवाल है, लेकिन अभी भी अंतर्दृष्टि imo के साथ कोई अच्छा अप-टू-डेट जवाब नहीं है।

इन दिनों, सभी ब्राउज़र समर्थन करते हैं mouseover/mouseoutऔर mouseenter/mouseleave। फिर भी, jQuery आपके हैंडलर को पंजीकृत नहीं करता है mouseenter/mouseleave, लेकिन चुपचाप उन्हें एक रैपर पर रखता है, mouseover/mouseoutजैसा कि निम्नलिखित कोड दिखाता है और अपनी थोड़ी अलग व्याख्या करता हैmouseenter/mouseleave ।

घटनाओं का सटीक व्यवहार "प्रतिनिधि हैंडलर" पर विशेष रूप से प्रासंगिक है। दुर्भाग्य से, jQuery की अपनी अलग व्याख्या भी है कि प्रतिनिधि हैंडलर क्या हैं और उन्हें घटनाओं के लिए क्या प्राप्त करना चाहिए। यह तथ्य सरल क्लिक घटना के लिए एक अन्य उत्तर में दिखाया गया है ।

तो jQuery के बारे में एक प्रश्न का ठीक से उत्तर कैसे दें, जो घटनाओं और हैंडलर के लिए जावास्क्रिप्ट शब्दांकन का उपयोग करता है, लेकिन दोनों को अलग बनाता है और इसका प्रलेखन में उल्लेख भी नहीं करता है?

"वास्तविक" जावास्क्रिप्ट में पहले अंतर:

• दोनों
  • जब माउस ब्राउज़र की स्थिति से तेज हो जाता है तो माउस बाहरी / बाहरी तत्वों से बाहरी / बाहरी तत्वों से "कूद" सकता है
  • किसी भी enter/overएक इसी हो जाता है leave/out(संभवतः देर से / उछल)
  • ईवेंट पॉइंटर के नीचे दृश्य तत्व पर जाते हैं (अदृश्य → लक्ष्य नहीं हो सकता)
• mouseenter/mouseleave
  • उस तत्व तक पहुँचाया जाता है जहाँ पंजीकृत है (लक्ष्य)
  • जब भी तत्व या किसी वंशज (जैसे कूद कर) को प्रवेश / छोड़ दिया जाता है
  • यह बुलबुला नहीं हो सकता है, क्योंकि वैचारिक रूप से वंश को प्रश्न में तत्व का हिस्सा माना जाता है, अर्थात ऐसे बच्चे नहीं हैं जहां से एक और घटना आ सकती है (माता-पिता के "प्रवेश / छोड़ दिया" के अर्थ के साथ ?!)
  • बच्चों के लिए समान हैंडलर पंजीकृत हो सकते हैं, जो सही ढंग से प्रवेश / छुट्टी देते हैं, लेकिन माता-पिता के प्रवेश / छुट्टी चक्र से असंबंधित हैं
• mouseover/mouseout
  • लक्ष्य सूचक के नीचे वास्तविक तत्व है
    • एक लक्ष्य दो चीजें नहीं हो सकती हैं: यानी एक ही समय में माता-पिता और बच्चा नहीं
  • घटना "घोंसला" नहीं कर सकती
    • एक बच्चे के "ओवरडेड" होने से पहले, माता-पिता को "आउट" होने की आवश्यकता होती है
  • बबल कर सकते हैं, क्योंकि लक्ष्य / संबंधितटार्ग इंगित करता है कि घटना कहां हुई है

कुछ परीक्षण के बाद, यह दिखाता है कि जब तक आप चयनकर्ता पंजीकरण के साथ jQuery के "प्रतिनिधि हैंडलर का उपयोग नहीं करते हैं", अनुकरण अनावश्यक है लेकिन उचित है: यह उन mouseover/mouseoutघटनाओं को फ़िल्टर करता है जो mouseenter/mouseleaveनहीं मिलेगा। लक्ष्य गड़बड़ है, हालांकि। असली mouseenter/mouseleaveहैंडलर तत्व को लक्ष्य के रूप में देगा, अनुकरण उस तत्व के बच्चों को इंगित कर सकता है, अर्थात जो कुछ भी किया mouseover/mouseoutजाता है।

const list = document.getElementById('log');
const outer = document.getElementById('outer');
const $outer = $(outer);

function log(tag, event) {
  const li = list.insertBefore(document.createElement('li'), list.firstChild);
  // only jQuery handlers have originalEvent
  const e = event.originalEvent || event;
  li.append(`${tag} got ${e.type} on ${e.target.id}`);
}

outer.addEventListener('mouseenter', log.bind(null, 'JSmouseenter'));
$outer.on('mouseenter', log.bind(null, '$mouseenter'));

div {
  margin: 20px;
  border: solid black 2px;
}

#inner {
  min-height: 80px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div id=outer>
    <ul id=log>
    </ul>
  </div>
</body>