শিশু উপাদান দ্বারা চালিত মাউসআউট ইভেন্টগুলি কীভাবে অক্ষম করবেন?

Question

আমাকে সমস্যার বিবরণে বর্ণনা করতে দিন:

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

JQuery এর সাথে এটি করার সর্বোত্তম এবং সংক্ষিপ্ততম উপায় কী?

আমি কী বোঝাতে চাইছি তা বোঝাতে এখানে একটি সরল উদাহরণ রয়েছে:

এইচটিএমএল:

<a>Hover Me</a>
<div>
  <input>Test</input>
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</div>

জাভাস্ক্রিপ্ট / JQuery:

$('a').hover( function() { $(this).next().show() }
              function() { $(this).next().hide() } );

Comments

এই প্রশ্নের jQuery সংস্করণ ছাড়াই

— Zach Sauceer

Answer 1

প্রশ্নটি কিছুটা পুরনো, তবে আমি অন্য দিন এটিতে ছুটে এসেছি।

JQuery এর সাম্প্রতিক সংস্করণের সাথে এই কাজ করতে সহজ উপায় ব্যবহার করা mouseenterএবংmouseleave বদলে ঘটনা mouseoverএবং mouseout।

আপনি এর সাথে আচরণটি দ্রুত পরীক্ষা করতে পারেন:

$(".myClass").on( {
   'mouseenter':function() { console.log("enter"); },
   'mouseleave':function() { console.log("leave"); }
});

Comments

আমার অ-jquery জাভাস্ক্রিপ্ট সম্পর্কিত সমস্যা সাহায্য করেছে। আমি আমার ইভেন্ট শ্রোতাদের সাথে মাউসলেভের পরিবর্তে মাউসেন্টার / মাউসআউট ব্যবহার করছিলাম!

— জো ই।

অনুসন্ধান অনুরোধে জন্য, এই মাউস ঘটনা আচরণে হয় সমতুল্য ROLL_OVERএবং ROLL_OUTAS3 হবে।

— জেফ ওয়ার্ড

কিছু মাথা ব্যথা বাঁচিয়েছি। বাচ্চাদের উপাদানগুলিতে ঘুরে বেড়ানো কীভাবে পিতামাতার mouseoutইভেন্টকে সূচিত করে , বাস্তবে এটি এখনও পিতামাতার উপাদানগুলির মধ্যে থাকে।

— javiniar.leonard

Answer 2

সরলতার জন্য, আমি মাউসওভার ইভেন্টটি আবদ্ধ যে উপাদানটির ভিতরে সদ্য প্রদর্শিত কন্টেন্টটি রাখার জন্য এইচটিএমএলকে কিছুটা সাজিয়েছি:

<div id="hoverable">
  <a>Hover Me</a>
  <div style="display:none;">
    <input>Test</input>
    <select>
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
  </div>
</div>

তারপরে, আপনি এরকম কিছু করতে পারেন:

$('#hoverable').hover( function() { $(this).find("div").show(); },
                       function() { $(this).find("div").hide(); } );

---

দ্রষ্টব্য: আমি ইনলাইন সিএসএসের প্রস্তাব দিই না, তবে উদাহরণটি হজম করা সহজ করার জন্য এটি করা হয়েছিল।

Comments

এটি প্রকৃতপক্ষে একটি খুব সহজ এবং পরিষ্কার সমাধান। আমাকে স্মরণ করার জন্য ধন্যবাদ. তবে আমার নির্দিষ্ট পরিস্থিতিতে, যা প্রশ্নের ঠিক ঠিক মতো নয়, এটি হ'ল একটি বিকল্প। ধন্যবাদ যদিও!

— স্যান্ডার ভার্স্লুয়াস

এখানে অন্যের দ্বারা বর্ণিত বিভিন্ন পদ্ধতির চেষ্টা করার পরে এসওতে, আমি আপনার পদ্ধতিতে ফিরে এসে আমার ক্ষেত্রে এটি কাজ করে চলেছি। হ্যাঁ! :-)

— স্যান্ডার ভার্স্লুয়াস

Answer 3

ইয়াপ, ছেলেরা, এর .mouseleaveপরিবর্তে ব্যবহার করুন .mouseout:

$('div.sort-selector').mouseleave(function() {
    $(this).hide();
});

এমনকি এটির সাথে একত্রে এটি ব্যবহার করুন live:

$('div.sort-selector').live('mouseleave', function() {
    $(this).hide();
});

Answer 4

আপনি জাভাস্ক্রিপ্ট এর প্রতিরোধ ইভেন্ট বুদবুদ এর jQuery সমতুল্য সন্ধান করছেন।

এটা দেখ:

http://docs.jquery.com/Events/jQuery.Event#event.stopPropagation.28.29

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

Comments

এটি যেমনটি করা উচিত তেমন কাজ করে না কেন আপনি কেন এটি কাজ করতে পারছেন না তা জানেন না just কেবল একটি তথ্য, ডক্সের একটি লিঙ্ক বদলেছে, নতুন লিঙ্কটি হ'ল ডকস.জেকুয়ারী / অ্যাভেন্টস / জিকুয়েরি vent 28,29

— zappan

Answer 5

আমি কেবল যাচ্ছি যে মাউস-স্থানাঙ্কগুলি মাউসআউট-ইভেন্টের উপাদানের বাইরে রয়েছে কিনা তা খতিয়ে দেখছি।

এটি কাজ করে তবে এ জাতীয় কোনও সাধারণ কাজের জন্য এটি প্রচুর কোড :(

function mouseOut(e)
{
    var pos = GetMousePositionInElement(e, element);
    if (pos.x < 0 || pos.x >= element.size.X || pos.y < 0 || pos.y >= element.size.Y)
    {
        RealMouseOut();
    }
    else
    {
         //Hit a child-element
    }
}

পাঠযোগ্যতার জন্য কোড কেটে দেওয়া হয়েছে, বাক্সটির বাইরে কাজ করবে না।

Answer 6

আমি রায়ের সাথে একমত

আপনার সমস্যাটি হ'ল "পরবর্তী" ডি এ এর ​​একটি "শিশু" নয় এইচটিএমএল বা জিক্যুরির জন্য এটির কোনও উপায় নেই যে আপনার "ক" উপাদানটি ডিওমে শিশু ডিভের সাথে সম্পর্কিত। এগুলি মোড়ানো এবং মোড়কের উপরে রাখার অর্থ হ'ল তারা যুক্ত।

দয়া করে মনে রাখবেন যে তাঁর কোডটি সর্বোত্তম অনুশীলনের সাথে সামঞ্জস্যপূর্ণ নয়। উপাদানগুলিতে লুকানো শৈলীর ইনলাইন সেট করবেন না; যদি ব্যবহারকারীর সিএসএস থাকে তবে জাভাস্ক্রিপ্ট না থাকে তবে উপাদানটি আড়াল হয়ে যাবে এবং এটি প্রদর্শিত হবে না। দস্তাবেজটিতে সেই ঘোষণাটি রাখা ভাল অনুশীলন ready প্রস্তুতি ইভেন্ট।

Comments

আমি ডকুমেন্টটিতে লুকিয়ে রাখার সাথে সম্পূর্ণ সম্মত। ইনলাইন সিএসএস কেবলমাত্র সহজতম উপায়ে একটি পূর্ণ কাজের উদাহরণ তুলে ধরার জন্য। আমি পরিষ্কার করতে আমার প্রতিক্রিয়া সম্পাদনা করব।

— রায়ান ম্যাকগেরি

Answer 7

আমি pointer-events: none;আমার সন্তানের উপাদান সিএসএস যোগ করে এই সমস্যাটি সমাধান করেছি

Comments

মাউসওভার এবং মাউসলেভ ইভেন্টগুলির সাথে নিজস্ব পপওভারগুলি তৈরির জন্য কিছু লিগ্যাসি কোড ঠিক করার সময় এটি সত্যিই অনেক সাহায্য করেছিল

— সিএম

Answer 8

আমি সাধারণত যেভাবে হ্যান্ডেলটি দেখেছি তা হল হওরমি উপাদান থেকে মাউসটি সরানোর মধ্যে প্রায় 1/2 সেকেন্ডের বিলম্ব হওয়া। মাউসটিকে আটকানো উপাদানটিতে স্থানান্তরিত করার সময়, আপনি কিছু পরিবর্তনশীল সেট করতে চান যা সিগন্যাল দেয় যে আপনি উপাদানটির উপর ঝাঁকুনি করছেন এবং তারপরে এই ভেরিয়েবলটি সেট করা থাকলে মূলত আড়াল করা অংশটি আড়াল করা থেকে বন্ধ করুন। তারপরে আপনি মাউসটি অপসারণ করার সময় এটির জন্য অদৃশ্য হয়ে যাওয়ার জন্য overedেকে রাখা উপাদান থেকে অনমাউসআউট সম্পর্কিত একটি অনুরূপ আড়াল ফাংশন যুক্ত করতে হবে। দুঃখিত আমি আপনাকে কোনও কোড বা আরও কিছু কংক্রিট দিতে পারি না তবে আমি আশা করি এটি আপনাকে সঠিক দিকে নির্দেশ করবে।

Comments

হ্যাঁ আইডি আমি সবেমাত্র এর মতো একটি সমাধান কার্যকর করেছি। এটি সত্যিই একটি সাধারণ সমস্যা। আমি কী সত্যিই কৌতুহলী অন্য সমাধান আছে কি ... উত্তরের জন্য ধন্যবাদ!

— স্যান্ডার ভার্স্লুয়স

Answer 9

এটি একটি পুরানো প্রশ্ন তবে এটি কখনও অচল হয়ে যায় না। সঠিক উত্তরটি বাইটব্রাইট দ্বারা দেওয়া উচিত ।

আমি কেবল মাউসওভার / মাউসআউট এবং মাউসেন্টার / মাউসলেভের মধ্যে পার্থক্যটি উল্লেখ করতে চাই। আপনি এখানে দুর্দান্ত এবং সহায়ক ব্যাখ্যা পড়তে পারেন (একটি ওয়ার্কিং ডেমোটির জন্য পৃষ্ঠার একেবারে নীচে যান)। আপনি যখন ব্যবহার করবেন mouseoutতখন মাউস অন্যরকম একটি উপাদান প্রবেশ করলে ইভেন্টটি থেমে যায়, এমনকি যদি এটি শিশু উপাদানও হয়। অন্যদিকে, আপনি যখন ব্যবহার করবেন mouseleaveতখন মাউস একটি শিশু উপাদানকে লক্ষ্য করে যখন ঘটনাটি ট্রিগার হয় না, এবং এটিই ওপি অর্জন করতে চাইবে behavior