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

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তখনও গুলি চালায়। বাস্তবে, এটি ভিউপোর্টের বাইরে থেকে উপাদানটি প্রবেশ করতে পারে (যদি উপাদানটি প্রান্তে ডানদিকে থাকে) এবং ইভেন্টটি এখনও আগুন ধরে।

— কলম্ব

ডেমো সর্বোত্তম ব্যাখ্যা;)

— লাকীলুক

বাস্তবের জন্য, ডেমোটি নিয়েই খেলুন।

— কেভিন হুইলার

Answer 2

Mouseenter এবং mouseleave না ঘটনা সাড়া জাগানো প্রতিক্রিয়া, যখন মাউসওভার এবং mouseout না ।

আচরণের বর্ণনা দেয় এমন একটি নিবন্ধ এখানে ।

Comments

এটি এটিকে পুরোপুরি ব্যাখ্যা করে: ইভেন্ট বুদবুদয়ের কারণে bl.ocks.org/mbostock/5247027 মাউসওভারটি যখনই কনটেইনার থেকে বের করা হয় তখনই এটি জ্বলতে থাকে।

— রাফায়েল এমশফ

Answer 3

এই জাতীয় প্রশ্নের সাথে প্রায়শই সত্য, কুইর্কস্মোডের সর্বোত্তম উত্তর রয়েছে ।

আমি কল্পনা করব, যেহেতু 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

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

— নাভিদ