জ্যাকুরি মাউসেন্টার () বনাম মাউসওভার ()

Question

সুতরাং একটি সম্প্রতি বললেন পড়ার পর প্রশ্ন আমি অস্পষ্ট am যদি আমি সত্যিই মধ্যে পার্থক্য বুঝতে mouseenter()এবং mouseover()। পোস্টটি জানিয়েছে

মাউসওভার ():

কোনও উপাদান প্রবেশ করার সময় এবং যখনই মৌলের মধ্যে কোনও মাউস চলাচল ঘটে তখন আগুন জ্বালিয়ে দেবে।

MouseEnter ():

একটি উপাদান প্রবেশের উপর আগুন লাগবে।

আমি এমন একটি ঝাঁকুনি নিয়ে এসেছি যা উভয়কেই ব্যবহার করে এবং এগুলি বেশ মিল বলে মনে হচ্ছে। কেউ দয়া করে আমাকে দুজনের মধ্যে পার্থক্য ব্যাখ্যা করতে পারেন?

আমি জিকিউরি সংজ্ঞা পড়ার চেষ্টা করেছি, দুজনেই একই কথা বলেছি।

যখন মাউস পয়েন্টার উপাদানটিতে প্রবেশ করে তখন মাউসওভার ইভেন্টটি একটি উপাদানে প্রেরণ করা হয়

যখন মাউস পয়েন্টার উপাদানটিতে প্রবেশ করে তখন মাউসেন্টার ইভেন্টটি একটি উপাদানে প্রেরণ করা হয়।

কেউ দয়া করে একটি উদাহরণ দিয়ে ব্যাখ্যা করতে পারেন?

Comments

ডকুমেন্টেশনের ডেমো এটি বেশ ভাল ইমো দেখায়।

— ফেলিক্স ক্লিংং

এটি এতই mouseenter এবং mouseleave টুকুনি IE তে মালিকানা ঘটনা ছিল শুধুমাত্র এবং jQuery দ্বারা অন্যান্য ব্রাউজারে emulated (তারা এখন বৈশিষ্ট যদিও এখনো অন্যান্য ব্রাউজারে বাস্তবায়িত হয়নি মধ্যে মনে করা হয়। See quirksmode.org/dom/events/mouseover.html )

— রাশ ক্যাম

মাউসওভার এবং মাউসেন্টার ইভেন্টগুলির মধ্যে পার্থক্যটির

— কাস্পার লি

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 যদি সেখানে + সমান হিসাবে চলে যায় তবে ওভারের জন্য গণনাটি যোগফলের যোগফল হবে প্রবেশ এবং প্রস্থান জন্য গণনা।

— গিলি 3

var n = + el.text();পরিবর্তে লেখার কোনও নির্দিষ্ট কারণ আছে var n = el.text();? আমি শুধু কৌতূহল চাইছি।

— ফ্রেড্রিক গাউস

@ ফ্রেড্রিকগস - আমি সংখ্যার +থেকে স্ট্রিংটি ফিরে আসতে বাধ্য করতে অপারেটরটি ব্যবহার করছি el.text()। আমার কি দরকার ছিল? না। এই ক্ষেত্রে, পরবর্তী বিবৃতি যা ব্যবহার করে nতা এটি একটি সংখ্যায় বাধ্য করে। তো, কেন আমি এটি ব্যবহার করেছি? আমি নিশ্চিত না ... এটি 2 বছর আগে ছিল। এটি একটি ভাল অভ্যাস। এটি আমার উদ্দেশ্যটি সুস্পষ্ট করে তুলেছে। সম্ভবত আমি n + 1সংরক্ষণ করার আগে মূলত আমার ছিল , তবে আমার কোডটি 2 টি অক্ষর দ্বারা সঙ্কুচিত করার এবং কেবল ব্যবহারের সিদ্ধান্ত নিয়েছে ++n। n + 1হবে না নিগৃহীত nএকটি সংখ্যা, কিন্তু এর পরিবর্তে নিগৃহীত হবে 1একটি স্ট্রিং আউটপুট, যেমন ফলে 0111111।

— গিলি 3

@ গিলি 3 - আপনার মনের ভ্রমণের বিশদ ব্যাখ্যার জন্য ধন্যবাদ।

— ফ্রেড্রিক গাউস

@ গিলি 3 ভাল সংক্ষিপ্তসার, তবে একটি সামান্য উন্নতি: "বা একটি সন্তানের উপাদান" হওয়া উচিত "বা একটি সন্তানের উপাদান রেখে দেয়, এই বিষয়টি প্রদত্ত যে বাচ্চা এবং পিতামাতার মধ্যে একটি ফাঁক রয়েছে your যে যখনই আপনি সন্তানের উপাদানটি ছেড়ে যান আপনি মাউসওভার ইভেন্টটি পান তবে কোনও প্যাডিং / মার্জিন না দিয়ে চেষ্টা করুন এবং আপনি এই ইভেন্টটি পাবেন না

— ইস্রায়েল

Answer 2

এটি আমার মধ্যে পাওয়া সেরা উদাহরণগুলির মধ্যে একটি:

• mouseenter
• মাউসওভার
• mouseout
• mouseleave

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

Comments

উদাহরণটি বেশ দুর্দান্ত, তবে আপনাকে উত্তোলন করতে আপনার উত্তরকে আরও কিছুটা কাঠামোবদ্ধ করতে হবে। মনে রাখবেন যে আপনি একটি প্রশ্নের উত্তর দেওয়ার চেষ্টা করছেন ... আপনার যদি লিঙ্কটি থাকে তবে সম্ভবত কোনও মন্তব্য আরও উপযুক্ত হবে। খ্যাতির কারণে যদি আপনি এখনও মন্তব্য করতে না পারেন তবে কিছু অর্জন করুন এবং পরে এটি করুন।

— scristalli

আসলে, আমি সত্যিই এই উত্তর পছন্দ। প্রশ্নকর্তা ইতিমধ্যে মাউসওভার এবং মাউসেন্টারের সংজ্ঞা দিয়েছেন। তারা একটি উদাহরণ চাইছিল, এবং এই উদাহরণটি দেখায় যে তারা এখানে অন্যান্য উদাহরণগুলির তুলনায় কীভাবে আরও বেশি ভাল কাজ করে।

— patorjk

গিলি 3 এর উত্তরের একটি ত্রুটি রয়েছে (আমার মন্তব্য দেখুন)। যদিও সুসংগঠিত নয়, এই উত্তরটি আরও ভাল উত্সকে নির্দেশ করে।

— ইস্রায়েল

Answer 3

যদিও তারা একই পদ্ধতিতে কাজ করে তবে, মাউস পয়েন্টারটি নির্বাচিত উপাদানটিতে প্রবেশ করলেmouseenter ইভেন্টটি কেবল ট্রিগার হয় । mouseoverঘটনার সূত্রপাত হয় একটি মাউস পয়েন্টার কোন সন্তান উপাদান হিসাবে ভাল প্রবেশ ।

Answer 4

Jquery ডকুমেন্টেশন পৃষ্ঠার নীচে উদাহরণ কোড এবং ডেমো দেখুন:

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

... পয়েন্টারটি যখন শিশু উপাদানটিতেও সরে যায় তখন মাউসওভার গুলি চালায়, যখন পয়েন্টারটি তখনই আবদ্ধ হয় যখন পয়েন্টারটি বাউন্ড এলিমেন্টে চলে যায়।

Answer 5

Mouseenter ঘটনা পৃথক থেকে মাউসওভার উপায়ে তা পরিচালনা ঘটনা সাড়া জাগানো । Mouseenter ঘটনা, শুধুমাত্র আরম্ভ করে তার হ্যান্ডলার যখন মাউস উপাদান প্রবেশ এটি, আবদ্ধ হয় না বংশধর । তথ্যসূত্র: https://api.jquery.com/mouseenter/

Mouseleave ঘটনা পৃথক থেকে mouseout উপায়ে তা পরিচালনা ঘটনা সাড়া জাগানো । মাউসলেভ ইভেন্টটি কেবল তখনই তার হ্যান্ডলারটিকে ট্রিগার করে যখন মাউস উপাদানটিকে আবদ্ধ করে দেয় তবে কোনও বংশধর নয় । তথ্যসূত্র: https://api.jquery.com/mouseleave/

Answer 6

এই উদাহরণটি মাউসমেভ , মাউসেন্টার এবং মাউসওভার ইভেন্টগুলির মধ্যে পার্থক্য প্রদর্শন করে :

https://jsfiddle.net/z8g613yd/

এইচটিএমএল:

<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 : প্রতিটি সময় মাউস পয়েন্টারটি ডিভ এলিমেন্টের উপরে সরানো হয়।
• onmouseenter : কেবল তখনই ঘটে যখন মাউস পয়েন্টারটি ডিভ উপাদানটিতে প্রবেশ করে।
• onmouseover : যখন মাউস পয়েন্টারটি ডিভ উপাদান এবং তার শিশু উপাদানগুলিতে প্রবেশ করে তখন (পি এবং স্প্যান) ঘটে।

Comments

আমি শুধু forked এবং সব JS সরানো - একরকম jsfiddle বলছে বিচারিক undefined হয় নষ্ট হয়ে গেছে <script> jsfiddle.net/orc8empd

— godblessstrawberry

Answer 7

পুরানো প্রশ্ন, তবে এখনও অন্তর্দৃষ্টি ইমো সহ কোনও ভাল আপ-টু-ডেট উত্তর নেই।

আজকাল, সমস্ত ব্রাউজার সমর্থন করে mouseover/mouseoutএবং mouseenter/mouseleave। তবুও, jQuery এতে আপনার হ্যান্ডলারটিকে নিবন্ধভুক্ত করে না mouseenter/mouseleave, তবে mouseover/mouseoutনীচের কোডটি দেখায় এবং নীরবে এগুলিকে চারপাশে একটি মোড়কে রাখে এবং এর নিজস্ব কিছুটা আলাদা ব্যাখ্যা করে mouseenter/mouseleave।

ইভেন্টগুলির সঠিক আচরণ বিশেষ করে "প্রতিনিধি হ্যান্ডলারগুলি" সম্পর্কিত relevant দুর্ভাগ্যক্রমে, jQuery এর প্রতিনিধি হ্যান্ডলারগুলি কী এবং ইভেন্টগুলির জন্য তাদের কী গ্রহণ করা উচিত তার নিজস্ব আলাদা ব্যাখ্যা রয়েছে। সরল ক্লিক ইভেন্টের জন্য সেই উত্তরটি অন্য উত্তরে দেখানো হয়েছে ।

তাহলে কীভাবে jQuery সম্পর্কিত কোনও প্রশ্নের উত্তর দিতে হবে, যা ইভেন্ট এবং হ্যান্ডলারের জন্য জাভাস্ক্রিপ্ট শব্দটি ব্যবহার করে তবে উভয়ই আলাদা করে তোলে এবং এর ডকুমেন্টেশনে এটি উল্লেখও করে না?

প্রথম "বাস্তব" জাভাস্ক্রিপ্ট মধ্যে পার্থক্য:

• উভয়
  • ব্রাউজারটি তার অবস্থানের নমুনাগুলির চেয়ে দ্রুত গতিতে চলে গেলে মাউস বাইরের / বহিরাগত উপাদানগুলি থেকে অভ্যন্তরীণ / অন্তর্নিহিত উপাদানগুলিতে "লাফিয়ে" যেতে পারে
  • যে কোনও enter/overএকটি পেতে leave/outপারে (সম্ভবত দেরী / ঝাপটায়)
  • ইভেন্টগুলি পয়েন্টারের নীচে দৃশ্যমান উপাদানগুলিতে যায় (অদৃশ্য target লক্ষ্য হতে পারে না)
• 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>