মাউস উইন্ডোটি ছেড়ে গেলে আমি কীভাবে সনাক্ত করতে পারি?

Question 1

মাউস উইন্ডোটি ছেড়ে গেলে আমি সনাক্ত করতে সক্ষম হতে চাই যাতে ব্যবহারকারীর মাউস অন্য কোথাও থাকাকালীন ঘটনাগুলিকে গুলি চালানো থেকে থামাতে পারি।

এটি করার কোনও ধারণা?

Question 2

দয়া করে মনে রাখবেন যে আমার উত্তরটির বয়স অনেক বেশি।

এইচটিএমএল পৃষ্ঠায় ড্রাগ-ড্রপ আচরণ বাস্তবায়নের সময় এই ধরণের আচরণটি সাধারণত পছন্দ হয়। এমএস উইন্ডোজ এক্সপি মেশিনে নীচের সমাধানটি IE 8.0.6, ফায়ারফক্স 3.6.6, অপেরা 10.53 এবং সাফারি 4 এ পরীক্ষা করা হয়েছিল।
প্রথমে পিটার-পল কোচের একটি ছোট্ট ফাংশন; ক্রস ব্রাউজার ইভেন্ট হ্যান্ডলার:

function addEvent(obj, evt, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evt, fn, false);
    }
    else if (obj.attachEvent) {
        obj.attachEvent("on" + evt, fn);
    }
}

এবং তারপরে নথির সাথে ইভেন্ট হ্যান্ডলার সংযুক্ত করতে এই পদ্ধতিটি ব্যবহার করুন মাউসআউট ইভেন্ট:

addEvent(document, "mouseout", function(e) {
    e = e ? e : window.event;
    var from = e.relatedTarget || e.toElement;
    if (!from || from.nodeName == "HTML") {
        // stop your drag event here
        // for now we can just use an alert
        alert("left window");
    }
});

অবশেষে, এখানে স্ক্রিপ্টটি ডিবাগিংয়ের জন্য এম্বেড থাকা এইচটিএমএল পৃষ্ঠা রয়েছে:

<html>
<head>
<script type="text/javascript">
function addEvent(obj, evt, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evt, fn, false);
    }
    else if (obj.attachEvent) {
        obj.attachEvent("on" + evt, fn);
    }
}
addEvent(window,"load",function(e) {
    addEvent(document, "mouseout", function(e) {
        e = e ? e : window.event;
        var from = e.relatedTarget || e.toElement;
        if (!from || from.nodeName == "HTML") {
            // stop your drag event here
            // for now we can just use an alert
            alert("left window");
        }
    });
});
</script>
</head>
<body></body>
</html>

Question 3

আপনি যদি jQuery ব্যবহার করছেন তবে এই সংক্ষিপ্ত এবং মিষ্টি কোডটি সম্পর্কে কীভাবে -

$(document).mouseleave(function () {
    console.log('out');
});

আপনার ইচ্ছে মতো মাউস আপনার পৃষ্ঠায় না থাকলে এই ইভেন্টটি ট্রিগার করবে। আপনি যা চান তা করতে কেবল ফাংশনটি পরিবর্তন করুন।

এবং আপনি এটি ব্যবহার করতে পারেন:

$(document).mouseenter(function () {
    console.log('in');
});

ট্রিগার করতে যখন মাউস আবার পৃষ্ঠায় প্রবেশ করে।

সূত্র: https://stackoverflow.com/a/16029966/895724

Question 4

এটি আমার পক্ষে কাজ করে:

addEvent(document, 'mouseout', function(evt) {
  if (evt.toElement == null && evt.relatedTarget == null) {
    alert("left window");
  }
});

Question 5

স্ক্রোল বার এবং স্বয়ংসম্পূর্ণ ক্ষেত্রটি বিবেচনা না করে বা পরিদর্শন না করে মাউসলেভ সনাক্ত করার জন্য:

document.addEventListener("mouseleave", function(event){

  if(event.clientY <= 0 || event.clientX <= 0 || (event.clientX >= window.innerWidth || event.clientY >= window.innerHeight))
  {

     console.log("I'm out");

  }
});

শর্তাবলী ব্যাখ্যা:

event.clientY <= 0  is when the mouse leave from the top
event.clientX <= 0  is when the mouse leave from the left
event.clientX >= window.innerWidth is when the mouse leave from the right
event.clientY >= window.innerHeight is when the mouse leave from the bottom

======================= সম্পাদনা ========================== ======

ডকুমেন্ট.এডএভেন্টলিস্টনার ("মাউসলেভ") নতুন ফায়ারফক্স সংস্করণে চালিত হয়নি বলে মনে হচ্ছে, মাউসলেভকে শরীরের মতো কোনও উপাদান বা একটি শিশু উপাদানের সাথে সংযুক্ত করা দরকার।

আমি পরিবর্তে ব্যবহার করার পরামর্শ দিই

document.body.addEventListener("mouseleave")

বা

window.addEventListener("mouseout")

Question 6

অনমাউসলিয়েভ ইভেন্টটি ব্যবহার করা বুদবুদ প্রতিরোধ করে এবং যখন মাউস ব্রাউজার উইন্ডোটি ছেড়ে যায় তখন আপনাকে সহজেই সনাক্ত করতে দেয়।

<html onmouseleave="alert('You left!')"></html>

http://www.w3schools.com/jsref/event_onmouseleave.asp

Question 7

এই উত্তরগুলির কোনওোটাই আমার পক্ষে কাজ করেনি। আমি এখন ব্যবহার করছি:

document.addEventListener('dragleave', function(e){

    var top = e.pageY;
    var right = document.body.clientWidth - e.pageX;
    var bottom = document.body.clientHeight - e.pageY;
    var left = e.pageX;

    if(top < 10 || right < 20 || bottom < 10 || left < 10){
        console.log('Mouse has moved out of window');
    }

});

আমি এটি একটি ড্রাগ এবং ড্রপ ফাইল আপলোডকারী উইজেটের জন্য ব্যবহার করছি। এটি একেবারে সঠিক নয়, যখন মাউস উইন্ডোটির প্রান্ত থেকে একটি নির্দিষ্ট দূরত্বে পৌঁছে তখন ট্রিগার করা হয়।

Question 8

আমি উপরের সমস্ত চেষ্টা করেছি, তবে কিছুই প্রত্যাশিতভাবে কাজ করছে বলে মনে হচ্ছে না। একটু গবেষণা করার পর আমি দেখেছি যে e.relatedTarget হয় এইচটিএমএল শুধু সামনে মাউস জানালা প্রস্থান করে ।

সুতরাং ... আমি এটি দিয়ে শেষ করেছি:


document.body.addEventListener('mouseout', function(e) {
    if (e.relatedTarget === document.querySelector('html')) {
        console.log('We\'re OUT !');
    }
});

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

2019 আপডেট

(ব্যবহারকারী হিসাবে 1084282 খুঁজে পেয়েছেন)

document.body.addEventListener('mouseout', function(e) {
    if (!e.relatedTarget && !e.toElement) {
        console.log('We\'re OUT !');
    }
});

Question 9

আমি যা বলেছিলাম তা ফিরিয়ে নিই। এটা সম্ভব. আমি এই কোডটি লিখেছি, নিখুঁতভাবে কাজ করে।

window.onload = function() {

    $span = document.getElementById('text');

    window.onmouseout = function() {
        $span.innerHTML = "mouse out";  
    }

    window.onmousemove = function() {
        $span.innerHTML = "mouse in";   
    }

}

ক্রোম, ফায়ারফক্স, অপেরাতে কাজ করে। আইইন্ট পরীক্ষিত তবে ধরে নিন এটি কার্যকর হয়।

সম্পাদনা করুন IE সর্বদা সমস্যা সৃষ্টি করে। এটি IE এ কাজ করতে, উইন্ডো থেকে নথিতে ইভেন্টগুলি প্রতিস্থাপন করুন:

window.onload = function() {

    $span = document.getElementById('text');

    document.onmousemove = function() {
        $span.innerHTML = "mouse move";
    }

    document.onmouseout = function() {
        $span.innerHTML = "mouse out";
    }

}

তাদের ক্রসব্রোজার কিক গাধা কার্সার সনাক্তকরণের জন্য একত্র করুন: পি

Question 10

এই সিএসএস প্রয়োগ:

html
{
height:100%;
}

এটি নিশ্চিত করে যে এইচটিএমএল উপাদানটি উইন্ডোর পুরো উচ্চতা গ্রহণ করে।

এই jquery প্রয়োগ করুন:

$("html").mouseleave(function(){
 alert('mouse out');
});

মাউসওভার এবং মাউসআউটের সমস্যাটি হ'ল আপনি যদি কোনও শিশু উপাদান থেকে এইচটিএমএল আউট / আউট করেন তবে এটি ইভেন্টটি সেট আপ করবে। আমি যে ক্রিয়াকলাপটি দিয়েছি তা কোনও সন্তানের উপাদানকে ছিটিয়ে দেওয়ার সময় সেট করা হয়নি । উইন্ডোটি মাউস আউট / ইন করলেই এটি সেট আপ করা হয়

কেবলমাত্র আপনার জানার জন্য আপনি যখন উইন্ডোতে ব্যবহারকারীর মাউসগুলি করতে পারেন এটি করতে পারেন:

$("html").mouseenter(function(){
  alert('mouse enter');
});

Question 11

আমি একের পর এক চেষ্টা করেছিলাম এবং সেই সময়ে একটি সেরা উত্তর পেয়েছি:

https://stackoverflow.com/a/3187524/985399

আমি পুরানো ব্রাউজারগুলি এড়িয়ে চলেছি তাই আধুনিক ব্রাউজারগুলিতে কাজ করার জন্য কোডটি ছোট করে তুললাম (আই 9 +)

    document.addEventListener("mouseout", function(e) {
        let t = e.relatedTarget || e.toElement;
        if (!t || t.nodeName == "HTML") {
          console.log("left window");
        }
    });

document.write("<br><br>PROBLEM<br><br><div>Mouseout trigg on HTML elements</div>")

স্নিপেট প্রসারিত করুন

এখানে আপনি ব্রাউজার সমর্থন দেখতে পাবেন

আমি ভেবেছিলাম এটা খুব ছোট ছিল

তবে একটি সমস্যা এখনও থেকে যায় কারণ ডকুমেন্টের সমস্ত উপাদানগুলিতে "মাউসআউট" ট্রিগার করে ।

এটি থেকে রোধ করতে মাউসলিভ (আই 5.5 +) ব্যবহার করুন । লিঙ্কে ভাল ব্যাখ্যা দেখুন।

নীচের কোডটি উপাদানটির ভিতরে বা বাইরে থাকা উপাদানগুলির মধ্যে ট্রিগার না করে কাজ করে। ডকুমেন্টের বাইরেও টেনে আনার চেষ্টা করুন।

var x = 0

document.addEventListener("mouseleave", function(e) { console.log(x++) 
})

document.write("<br><br>SOLUTION<br><br><div>Mouseleave do not trigg on HTML elements</div>")

স্নিপেট প্রসারিত করুন

আপনি কোনও HTML উপাদানটিতে ইভেন্টটি সেট করতে পারেন। document.bodyযদিও ইভেন্টটি করবেন না , কারণ উইন্ডোজ স্ক্রোলবারটি যখন শরীরটি এবং আগুন সঙ্কুচিত করতে পারে যখন মাউস পয়েন্টারটি স্ক্রোল বারের নীচে থাকে আপনি যখন স্ক্রোল করতে চান তবে তার উপর একটি মাউসলাইভ ইভেন্টটি ট্রিগ করতে না চান। documentউদাহরণস্বরূপ, পরিবর্তে এটি সেট করুন ।

Question 12

দেখুন mouseoverএবং mouseout।

var demo = document.getElementById('demo');
document.addEventListener("mouseout", function(e){demo.innerHTML="😞";});
document.addEventListener("mouseover", function(e){demo.innerHTML="😊";});

div { font-size:80vmin; position:absolute;
      left:50%; top:50%; transform:translate(-50%,-50%); }

<div id='demo'>😐</div>

স্নিপেট প্রসারিত করুন

Question 13

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

Question 14

সম্ভবত এটি পরে যারা এখানে আসবে তাদের কয়েকটিকে সহায়তা করবে। window.onblurএবং document.mouseout।

window.onblur ট্রিগার করা হয় যখন:

আপনি Ctrl+Tabবা অন্য ব্যবহার করে অন্য উইন্ডোতে স্যুইচ করুন Cmd+Tab।
আপনি দস্তাবেজ পরিদর্শকের উপর ফোকাস (কেবল মাউসওভার নয়)।
আপনি ডেস্কটপগুলি স্যুইচ করুন।

মূলত যে কোনও সময় ব্রাউজার ট্যাব ফোকাস হারায়।

window.onblur = function(){
    console.log("Focus Out!")
}

document.mouseout ট্রিগার করা হয় যখন:

আপনি কার্সারটি শিরোনাম বারে সরিয়ে ফেলুন।
আপনি Ctrl+Tabবা অন্য ব্যবহার করে অন্য উইন্ডোতে স্যুইচ করুন Cmd+Tab।
আপনি কর্সারটি ডকুমেন্ট ইন্সপেক্টরকে সরিয়ে নিয়ে যান।

মূলত যে কোনও ক্ষেত্রে যখন আপনার কার্সার নথিটি ছেড়ে দেয়।

document.onmouseleave = function(){
    console.log("Mouse Out!")
}

Question 15

$(window).mouseleave(function(event) {
  if (event.toElement == null) {
    //Do something
  }
})

এটি কিছুটা হ্যাকি হতে পারে তবে মাউস উইন্ডোটি ছেড়ে দিলে এটি কেবল ট্রিগার হবে। আমি বাচ্চাদের ইভেন্টগুলি ধরে রেখেছি এবং এটি এটি সমাধান করেছে

Question 16

$(window).mouseleave(function() {
 alert('mouse leave');
});

Question 17

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

<script>
    var leave = 0
    //show modal when mouse off of page
    $("html").mouseleave(function() {
       //check for first time
       if (leave < 1) {
          modal.style.display = "block";
          leave = leave + 1;
       }
    });

    // Get the modal with id="id01"
       var modal = document.getElementById('id01');

    // When the user clicks anywhere outside of the modal, close it
       window.onclick = function(event) {
          if (event.target == modal) {
             modal.style.display = "none";
          }
       }
</script>

Question 18

আমি এটি পরীক্ষা করেছি না, তবে আমার প্রবৃত্তিটি বডি ট্যাগে একটি অনমাউসআউট ফাংশন কল করা।

Question 19

এটি ক্রোমে কাজ করবে,

$(document).bind('dragleave', function (e) {
    if (e.originalEvent.clientX == 0){
        alert("left window");
    }
});