JQuery ব্যতীত পিতামাতার পরম ডিভের শিশু উপাদানকে ঘুরে বেড়ানোর সময় অনমাউসআউট প্রতিরোধ করুন

Question

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

আমি mouseoutযখন ঘটনাটিকে কোনও জেকোরি ছাড়াই কোনও শিশু উপাদানকে আঘাত করি তখন আমি কীভাবে ঘটনাটিকে গুলি চালানো থেকে আটকাতে পারি ।

আমি জানি ইভেন্ট বুদবুদ দিয়ে এর কিছু করার আছে, তবে কীভাবে এটি কাজ করবেন তা খুঁজে পাওয়ার জন্য আমার ভাগ্য নেই।

আমি এখানে একটি অনুরূপ পোস্ট পেয়েছি: শিশু উপাদান দ্বারা চালিত মাউসআউট ইভেন্টগুলি কীভাবে অক্ষম করবেন?

তবে সেই সমাধানটি jQuery ব্যবহার করে।

Comments

আমি একটি সময়সীমা ব্যবহার করে সমস্যাটি সমাধান করে এবং শিশু উপাদানগুলির উপর হামলা করার বিষয়টি পরিষ্কার করে দিয়েছিলাম

— জন

হাই, আমি আপনার ডেমোটি দেখেছি কিন্তু যখন আমি নীচে ডান প্যানেলে উপাদানগুলি দিয়ে যাই কিছু হয় না?

— জন

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

— ব্যবহারকারী 823527

নীচে সমাহিত

— ক্রেগমিকেলম্যাটমার্টিন

Answer 1

function onMouseOut(event) {
        //this is the original element the event handler was assigned to
        var e = event.toElement || event.relatedTarget;
        if (e.parentNode == this || e == this) {
           return;
        }
    alert('MouseOut');
    // handle mouse event here!
}



document.getElementById('parent').addEventListener('mouseout',onMouseOut,true);

আমি প্রয়োজনীয় সমস্ত সিএসএস এবং এইচটিএমএল সহ একটি দ্রুত জেএসফিডাল ডেমো তৈরি করেছি, এটি পরীক্ষা করে দেখুন ...

ক্রস ব্রাউজার সমর্থনের জন্য সংশোধিত ফিক্সড লিংক http://jsfiddle.net/RH3tA/9/

লক্ষ্য করুন যে এটি কেবল তাত্ক্ষণিক পিতামাতাকে যাচাই করে, যদি পিতামাতা ডিভ বাচ্চাদের নেস্ট করে থাকে তবে আপনাকে "অরজিনাল উপাদান" খুঁজছেন এমন উপাদানগুলির মাধ্যমে কোনওভাবেই পেরোতে হবে

নেস্টেড বাচ্চাদের জন্য এডিআইটি উদাহরণ

আশা করি ক্রস ব্রাউজারের জন্য সম্পাদনা সম্পাদিত

function makeMouseOutFn(elem){
    var list = traverseChildren(elem);
    return function onMouseOut(event) {
        var e = event.toElement || event.relatedTarget;
        if (!!~list.indexOf(e)) {
            return;
        }
        alert('MouseOut');
        // handle mouse event here!
    };
}

//using closure to cache all child elements
var parent = document.getElementById("parent");
parent.addEventListener('mouseout',makeMouseOutFn(parent),true);

//quick and dirty DFS children traversal, 
function traverseChildren(elem){
    var children = [];
    var q = [];
    q.push(elem);
    while (q.length > 0) {
      var elem = q.pop();
      children.push(elem);
      pushAll(elem.children);
    }
    function pushAll(elemArray){
      for(var i=0; i < elemArray.length; i++) {
        q.push(elemArray[i]);
      }
    }
    return children;
}

এবং একটি নতুন JSFiddle , সম্পাদনা আপডেট লিংক

Comments

আপনার মাউডআউট ইভেন্টটি ফ্রিডিতে যুক্ত করা উচিত যাতে এটি পরীক্ষা করা যায়। একটি সতর্কতা বা কিছু করা উচিত।

— জন

দুঃখিত মনে হচ্ছে আপনার কাছে সতর্কতা রয়েছে ('মাউসআউট'), তবে এটি আমার পক্ষে কাজ করে না? আমি কোনও জেএস লাইব্রেরি বিকল্প না দিয়ে রান করেছি

— জন

সাফারি এবং ক্রোমের উপর পরীক্ষিত, তবে সবকিছুতে কাজ করা উচিত! আপনার ব্রাউজারটি কি?

— আমজাদ মাসাদ

আপনার যদি গ্র্যান্ড বাচ্চা হয়? বা মহান গ্র্যান্ড শিশুদের? অর্থাত্‍ কেবল বাচ্চাদের হ্রাস করার পরিবর্তে কি পুনরাবৃত্ত সমাধান হতে পারে?

— Roozbeh15

এটি কাজ করে না। mouseleaveসঠিক উত্তর

— কোড হুইস্পেরার

Answer 2

ব্যবহার onmouseleave।

অথবা, jQuery এ, ব্যবহার করুন mouseleave()

এটি ঠিক আপনি যা খুঁজছেন তা। উদাহরণ:

<div class="outer" onmouseleave="yourFunction()">
    <div class="inner">
    </div>
</div>

বা, jQuery এ:

$(".outer").mouseleave(function(){
    //your code here
});

একটি উদাহরণ এখানে ।

Comments

onMouseLeaveএটি আমি ব্যবহার করে শেষ করেছি কারণ এটি বুদ্বুদ হয় না।

— আলেকজ

আমাকে অনেক সময় বাঁচিয়েছে। thnx

— NPO

mouseleaveবাতিল করা যায় না।

— গ্রীকদেব

@ গ্রেকদেব, আরও বলুন!

— বেন হুইলার

Answer 3

একটি সহজ খাঁটি সিএসএস সমাধানের জন্য যা কিছু ক্ষেত্রে ( আইই 11 বা আরও নতুন ) কাজ করে, কেউ বাচ্চাদের এ pointer-eventsসেট করে সরিয়ে ফেলতে পারেnone

.parent * {
     pointer-events: none;
}

Comments

উজ্জ্বল! সম্পূর্ণ আমার সমস্যা ঠিক!

— আন্না_ মিডিয়াগার্ল

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

— মিকেল ভি। 21

এটি মাউসআউটকে গুলি চালানো থেকে বিরত রাখে তবে আমার জন্য এটি আসল শিশুটিকে মেনুতে নির্বাচন হিসাবে ক্লিক করতে বাধা দেয় যা মেনুটির মূল বিষয়।

— জনবেকার্স

@ হেলোফ্যাঙ্ক সেজন্য আপনি ক্লিক ইভেন্টটি পিতামাতার কাছে প্রয়োগ করবেন। প্রয়োজনীয় কোডটি বাস্তবায়নের উপর নির্ভর করে পরিবর্তিত হয়, এই উত্তরটি কেবল pointer-eventsসম্পত্তিটি ব্যবহারের পরামর্শ দেয়

— Zach Sauceer

এটি কেবল তখনই কাজ করে যদি আপনার অঞ্চলে অন্যান্য নিয়ামক উপাদান (সম্পাদনা, মোছা) না থাকে, কারণ এই সমাধান

— তাদেরকেও

Answer 4

নীচে কী এসেছিল তার উপর ভিত্তি করে এখানে আরও মার্জিত সমাধান's এটি একাধিক স্তরের বাচ্চাদের কাছ থেকে ইভেন্ট বুবলির জন্য অ্যাকাউন্ট করে। এটি ক্রস ব্রাউজার সমস্যাগুলির জন্য অ্যাকাউন্ট করে।

function onMouseOut(this, event) {
//this is the original element the event handler was assigned to
   var e = event.toElement || event.relatedTarget;

//check for all children levels (checking from bottom up)
while(e && e.parentNode && e.parentNode != window) {
    if (e.parentNode == this||  e == this) {
        if(e.preventDefault) e.preventDefault();
        return false;
    }
    e = e.parentNode;
}

//Do something u need here
}

document.getElementById('parent').addEventListener('mouseout',onMouseOut,true);

Comments

স্যাম এলি, মনে হচ্ছে এটি IE, সাফারি বা অপেরাতে কাজ করছে না। আপনার কাছে এই স্ক্রিপ্টটির ক্রস ব্রাউজার সংস্করণ রয়েছে? এটি ফায়ারফক্স এবং ক্রোমে আকর্ষণীয় কাজ করে। ধন্যবাদ।

আমি যখন আমার স্ক্রিপ্টে উপরের ফাংশনটি পেস্ট করি তখন ড্রিমউইভার এবং এফএফ প্রথম লাইনে একটি ত্রুটি ফেলে দেয়, "মাউসআউট (এটি, ইভেন্ট) ফাংশন function"। " দেখে মনে হচ্ছে আপনাকে প্যারামিটার হিসাবে "এটি" রাখার অনুমতি নেই। আমি অনুমান করি যে আমি যখন এই ইনপুট প্যারামগুলি থেকে "এটি" ছেড়ে দিই তখন এটি ধরণের কাজ করে তবে আমি নিশ্চিতভাবে জানি না কারণ "আমি যা জানি না তা আমি জানি না"।

— তারকাস

thisক্রিগের মধ্যে একই সমস্যাটি একই লাইনে পপ আপ হয়েছিল, ফাংশন সংজ্ঞা লাইন @ গ্রেগরিলিউইস বাদে এই সমস্যাটি সমাধান করেছেন। আরও ক্রস ব্রাউজার সমর্থনের জন্য, এটি ব্যবহার করে দেখুন: যদি (উইন্ডো.এডডএভেন্টলিস্টনার) {ডকুমেন্ট.জেটএলমেন্টবাইআইডি ('প্যারেন্ট')। অ্যাডইভেন্টলিস্টনার ('মাউসআউট', মাউসআউট, সত্য); } অন্যথায় যদি (উইন্ডো.ট্যাচইভেন্ট) {ডকুমেন্ট.জেটএলিটমেন্টবাইআইডি ('প্যারেন্ট') attach }

— ডিওয়িলস

খুব সুদর্শন! পুরানো ব্রাউজারগুলির জন্য সমর্থন প্রয়োজন হলে সেরা উত্তর।

— বার্নিনলিও

Answer 5

আমজাদ মাসাদকে ধন্যবাদ যা আমাকে অনুপ্রাণিত করেছিল।

আমি নিম্নলিখিত সমাধানটি পেয়েছি যা আই 9, এফএফ এবং ক্রোমে কাজ করে বলে মনে হচ্ছে এবং কোডটি বেশ সংক্ষিপ্ত (জটিল ক্লোজার এবং ট্রান্সভার্স শিশুদের জিনিসগুলি ছাড়াই):

    DIV.onmouseout=function(e){
        // check and loop relatedTarget.parentNode
        // ignore event triggered mouse overing any child element or leaving itself
        var obj=e.relatedTarget;
        while(obj!=null){
            if(obj==this){
                return;
            }
            obj=obj.parentNode;
        }
        // now perform the actual action you want to do only when mouse is leaving the DIV
    }

Answer 6

পরিবর্তে অনমাউসআউট ব্যবহার করুন onmouseleave।

আপনি আমাদের নির্দিষ্ট কোডটি আমাদের কাছে দেখান নি তাই এটি কীভাবে করবেন তা আপনার নির্দিষ্ট উদাহরণে আমি আপনাকে প্রদর্শন করতে পারি না।

তবে এটি খুব সহজ: কেবলমাত্র অনমাইলআউটটি অনমাউসআউটটি প্রতিস্থাপন করুন।

এটাই সব :) তাই, সাধারণ :)

কীভাবে এটি করবেন তা নিশ্চিত না হলে এখানে ব্যাখ্যাটি দেখুন:

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmousemove_leave_out

পিষ্টকের শান্তি :) এটি উপভোগ করুন :)

Comments

এটি দুর্দান্ত চেঁচামেচি, আপনার যদি একইরকম পরিস্থিতি রয়েছে কিনা তা পরীক্ষা করে দেখার পক্ষে

— ক্রিস

Answer 7

আপনি যদি jQuery ব্যবহার করেন তবে আপনি "মাউসলেভ" ফাংশনটিও ব্যবহার করতে পারেন, যা আপনার পক্ষে এই সমস্তগুলির সাথে কাজ করে।

$('#thetargetdiv').mouseenter(do_something);
$('#thetargetdiv').mouseleave(do_something_else);

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

Answer 8

আমি মনে করি Quirksmode সব উত্তর আপনি প্রয়োজন (বিভিন্ন ব্রাউজার সাড়া জাগানো আচরণ এবং হয়েছে mouseenter / mouseleave ঘটনা), কিন্তু আমি মনে করি যে ঘটনা সাড়া জাগানো জগাখিচুড়ি সবচেয়ে সাধারণ উপসংহার হল JQuery বা Mootools (যা হয়েছে মত একটি কাঠামো ব্যবহার mouseenter এবং মাউসলেভ ইভেন্টগুলি, যা হুবহু যা ঘটেছিল তা ঘটবে)।

তারা এটি কীভাবে করে তা একবার দেখুন, আপনি যদি চান তবে এটি নিজে করুন
বা আপনি ইভেন্টের অংশ (এবং এর নির্ভরতা) সহ আপনার কাস্টম "লিন মেন" সংস্করণ তৈরি করতে পারেন oot

Answer 9

চেষ্টা mouseleave()

উদাহরণ:

<div id="parent" mouseleave="function">
   <div id="child">

   </div>
</div>

;)

Answer 10

আমি একটি খুব সহজ সমাধান খুঁজে পেয়েছি,

onmousout = "myfunc ()" ইভেন্টের চেয়ে কেবল onmouseleave = "myfunc ()" ইভেন্টটি ব্যবহার করুন

আমার কোড এ কাজ করেছে !!

উদাহরণ:

<html>
<head>
<script type="text/javascript">
   function myFunc(){
      document.getElementById('hide_div').style.display = 'none';
   }
   function ShowFunc(){
      document.getElementById('hide_div').style.display = 'block';
   }
</script>
</head>
<body>
<div onmouseleave="myFunc()" style='border:double;width:50%;height:50%;position:absolute;top:25%;left:25%;'>
   Hover mouse here
   <div id='child_div' style='border:solid;width:25%;height:25%;position:absolute;top:10%;left:10%;'>
      CHILD <br/> It doesn't fires if you hover mouse over this child_div
   </div>
</div>
<div id="hide_div" >TEXT</div>
<a href='#' onclick="ShowFunc()">Show "TEXT"</a>
</body>
</html>

মাউসআউট ফাংশন সহ একই উদাহরণ:

<html>
<head>
<script type="text/javascript">
   function myFunc(){
      document.getElementById('hide_div').style.display = 'none';
   }
   function ShowFunc(){
      document.getElementById('hide_div').style.display = 'block';
   }
</script>
</head>
<body>
<div onmouseout="myFunc()" style='border:double;width:50%;height:50%;position:absolute;top:25%;left:25%;'>
   Hover mouse here
   <div id='child_div' style='border:solid;width:25%;height:25%;position:absolute;top:10%;left:10%;'>
      CHILD <br/> It fires if you hover mouse over this child_div
   </div>
</div>
<div id="hide_div">TEXT</div>
<a href='#' onclick="ShowFunc()">Show "TEXT"</a>
</body>
</html>

আশা করি এটা সাহায্য করবে :)

Answer 11

যদিও সমাধান আপনি ব্যবহারসমূহ jQuery, উল্লেখ mouseenter এবং mouseleave , নেটিভ ডোম ঘটনা যাতে আপনি jQuery ছাড়া ব্যবহার হতে পারে।

Answer 12

এটি পরিচালনা করার দুটি উপায় রয়েছে।

1) আপনার কলব্যাকের ইভেন্ট.আর্টেজের ফলাফলটি এটি আপনার পিতামাতার সাথে মিলছে কিনা তা দেখুন

var g_ParentDiv;

function OnMouseOut(event) {
    if (event.target != g_ParentDiv) {
        return;
    }
    // handle mouse event here!
};


window.onload = function() {
    g_ParentDiv = document.getElementById("parentdiv");
    g_ParentDiv.onmouseout = OnMouseOut;
};

<div id="parentdiv">
    <img src="childimage.jpg" id="childimg" />
</div>

2) বা ইভেন্ট ক্যাপচার এবং কল কল ইভেন্ট ব্যবহার করুন। কলব্যাক ফাংশন স্টপ

var g_ParentDiv;

function OnMouseOut(event) {

    event.stopPropagation(); // don't let the event recurse into children

    // handle mouse event here!
};


window.onload = function() {
    g_ParentDiv = document.getElementById("parentdiv");
    g_ParentDiv.addEventListener("mouseout", OnMouseOut, true); // pass true to enable event capturing so parent gets event callback before children
};

<div id="parentdiv">
    <img src="childimage.jpg" id="childimg" />
</div>

Comments

আমি কীভাবে এই কাজটি অনমাউসআউটের পরিবর্তে অনমাউসআউটের জন্য করতে পারি?

— জন

উফ। আমার খারাপ। আমি কেবল উপরের কোডটিতে "মাউসআউট" সংক্রান্ত সমস্ত "মাউসওভার" রেফারেন্স পরিবর্তন করেছি। এটি আপনার জন্য করা উচিত।

— সেলবি

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

— জন

একই জিনিস দ্বিতীয় পদ্ধতির জন্য ঘটে। যখন মাউস একটি শিশু উপাদান প্রবেশ করে এটি এখনও ইভেন্টটি ট্রিগার করে

— জন

Answer 13

আমি এটি দিয়ে এটি একটি কবজির মতো কাজ করি:

function HideLayer(theEvent){
 var MyDiv=document.getElementById('MyDiv');
 if(MyDiv==(!theEvent?window.event:theEvent.target)){
  MyDiv.style.display='none';
 }
}

আহ, এবং MyDivট্যাগ এর মত:

<div id="MyDiv" onmouseout="JavaScript: HideLayer(event);">
 <!-- Here whatever divs, inputs, links, images, anything you want... -->
<div>

এইভাবে, অনমূআউট যখন কোনও শিশু, গ্র্যান্ড-বাচ্চা ইত্যাদির কাছে যায় ... style.display='none'মৃত্যুদণ্ড কার্যকর হয় না; তবে অনমূআউট যখন মাইডিভের বাইরে চলে যায় তখন তা চলে।

সুতরাং বংশ বিস্তার, টাইমার ব্যবহার ইত্যাদি বন্ধ করার দরকার নেই ...

উদাহরণস্বরূপ ধন্যবাদ, আমি তাদের কাছ থেকে এই কোডটি তৈরি করতে পারি।

আশা করি এটি কাউকে সাহায্য করবে।

এছাড়াও এইভাবে উন্নতি করা যেতে পারে:

function HideLayer(theLayer,theEvent){
 if(theLayer==(!theEvent?window.event:theEvent.target)){
  theLayer.style.display='none';
 }
}

এবং তারপরে ডিআইভি ট্যাগগুলি:

<div onmouseout="JavaScript: HideLayer(this,event);">
 <!-- Here whatever divs, inputs, links, images, anything you want... -->
<div>

সুতরাং আরও সাধারণ, কেবল একটি ডিভের জন্য নয় এবং id="..."প্রতিটি স্তরে যুক্ত করার দরকার নেই ।

Answer 14

ইভেন্টটির সাথে ইভেন্টটি যা সংযুক্ত রয়েছে সেই উপাদানটিতে আপনার অ্যাক্সেস থাকলে আপনি mouseoutব্যবহার contains()করতে পারেন যে এটি event.relatedTargetশিশু উপাদান কিনা ।

হিসাবে event.relatedTargetউপাদান যা মাউস মধ্যে পেরিয়ে গেছে, যদি একটি শিশু উপাদান নয়, আপনি উপাদান থেকে বের moused হয়েছে।

div.onmouseout = function (event) {
    if (!div.contains(event.relatedTarget)) {
        // moused out of div
    }
}

Answer 15

কৌণিক 5, 6 এবং 7 এ

<div (mouseout)="onMouseOut($event)"
     (mouseenter)="onMouseEnter($event)"></div>

তারপর

import {Component,Renderer2} from '@angular/core';
...
@Component({
 selector: 'app-test',
 templateUrl: './test.component.html',
 styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit, OnDestroy {
...
 public targetElement: HTMLElement;

 constructor(private _renderer: Renderer2) {
 }

 ngOnInit(): void {
 }

 ngOnDestroy(): void {
  //Maybe reset the targetElement
 }

 public onMouseEnter(event): void {
  this.targetElement = event.target || event.srcElement;
  console.log('Mouse Enter', this.targetElement);
 }

 public onMouseOut(event): void {
  const elementRelated = event.toElement || event.relatedTarget;
  if (this.targetElement.contains(elementRelated)) {
    return;
  }
  console.log('Mouse Out');
 }
}

Answer 16

আমি উপাদানটির সীমানাগুলির পৃষ্ঠা স্থানাঙ্কগুলি পেতে মূল উপাদানটির অফসেটটি পরীক্ষা করে দেখি, তারপরে নিশ্চিত হয়ে নিন যে মাউসআউটটি যখন সীমা ছাড়িয়ে যায় তখনই মাউসআউট ক্রিয়াটি ট্রিগার হয়। ময়লা তবে এটি কাজ করে।

$(el).live('mouseout', function(event){
    while(checkPosition(this, event)){
        console.log("mouseovering including children")
    }
    console.log("moused out of the whole")
})

var checkPosition = function(el, event){
    var position = $(el).offset()
    var height = $(el).height()
    var width = $(el).width()
    if (event.pageY > position.top 
|| event.pageY < (position.top + height) 
|| event.pageX > position.left 
|| event.pageX < (position.left + width)){
    return true
}
}

Answer 17

var elem = $('#some-id');
elem.mouseover(function () {
   // Some code here
}).mouseout(function (event) {
   var e = event.toElement || event.relatedTarget;
   if (elem.has(e).length > 0) return;

   // Some code here
});

Comments

আপনার অ্যাঞ্জার দিয়ে দয়া করে কিছু ব্যাখ্যা দিন।

— সেবাস ভ্যান বক্সেল

Answer 18

যদি আপনি প্যারেন্ট উপাদানটিতে সিএসএস ক্লাস বা আইডি যুক্ত করেন (বা থাকে) তবে আপনি এর মতো কিছু করতে পারেন:

<div id="parent">
  <div>
  </div>
</div>

JavaScript:
document.getElementById("parent").onmouseout = function(e) {
  e = e ? e : window.event //For IE
  if(e.target.id == "parent") {
    //Do your stuff
  }
}

সুতরাং ইভেন্টটি যখন পিতামহক ডিভিতে থাকে কেবল তখন স্টাফগুলি কার্যকর করা হয়।

Answer 19

আমি আপনার সাথে কিছু ভাগ করতে চাইছিলাম। ঘটনা এবং ইভেন্টগুলির
সাথে আমি কিছুটা কঠিন সময় পেলাম । ng-mouseenterng-mouseleave

কেস স্টাডি:

আমি একটি ভাসমান নেভিগেশন মেনু তৈরি করেছি যা কার্সারটি যখন কোনও আইকন দিয়ে যায় তখন টগল হয়।
এই মেনুটি প্রতিটি পৃষ্ঠার উপরে ছিল।

• মেনুতে শো / লুকানোর জন্য, আমি একটি ক্লাস টগল করছি।
  ng-class="{down: vm.isHover}"
• Vm.isHover টগল করতে , আমি এনজি মাউস ইভেন্টগুলি ব্যবহার করি।
  ng-mouseenter="vm.isHover = true"
ng-mouseleave="vm.isHover = false"

আপাতত, সবকিছু ঠিকঠাক ছিল এবং প্রত্যাশার মতো কাজ করেছিল।
সমাধানটি পরিষ্কার এবং সহজ।

আগত সমস্যা:

একটি নির্দিষ্ট দৃষ্টিতে আমার কাছে উপাদানগুলির একটি তালিকা রয়েছে।
কার্সারটি তালিকার কোনও উপাদানকে ছাড়িয়ে যাওয়ার পরে আমি একটি অ্যাকশন প্যানেল যুক্ত করেছি।
আমি আচরণটি পরিচালনা করতে উপরের মত একই কোড ব্যবহার করেছি।

সমস্যাটি:

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

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

প্রথম চিন্তা:

আমি এগুলি ব্যবহার করার চেষ্টা করেছি:

• $event.stopPropagation()
• $event.stopImmediatePropagation()

আমি প্রচুর এনজি পয়েন্টার ইভেন্টগুলি (মাউসমোভ, মাউওভার, ...) একত্রিত করেছিলাম তবে কেউই আমাকে সহায়তা করেনি।

সিএসএস সমাধান:

আমি একটি সহজ সিএসএস সম্পত্তি সহ সমাধানটি পেয়েছি যা আমি আরও এবং বেশি ব্যবহার করি:

pointer-events: none;

মূলত, আমি এটির মতো ব্যবহার করি (আমার তালিকার উপাদানগুলিতে):

ng-style="{'pointer-events': vm.isHover ? 'none' : ''}"

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

আরো যেতে:

আপনি যেমনটি আশা করতে পারেন, এই সমাধানটি কাজ করে তবে আমি এটি পছন্দ করি না।
আমরা আমাদের ইভেন্টগুলি নিয়ন্ত্রণ করি না এবং এটি খারাপ।
এছাড়াও, vm.isHoverএটি অর্জনের জন্য আপনার অবশ্যই সুযোগের অ্যাক্সেস থাকতে হবে এবং এটি সম্ভব বা সম্ভব না হলেও কোনওভাবে বা অন্য কোনওভাবে নোংরা হতে পারে।
কেউ দেখতে চাইলে আমি একটি ঝাঁকুনি তৈরি করতে পারি।

তবুও, আমার আর সমাধান নেই ...
এটি দীর্ঘ গল্প এবং আমি আপনাকে আলু দিতে পারি না তাই দয়া করে আমার বন্ধুকে ক্ষমা করুন।
যাইহোক, pointer-events: noneজীবন, তাই এটি মনে রাখবেন।