仅当光标距离div再距div 200px时才关闭div

Question

I'm trying to close a popup DIV when a user clicks with his cursor on the outside of the popup DIV. I use this JQuery to do so:

$(document).mouseup(function (e) {
          var container = $(".polnamen");

          if (!container.is(e.target) // if the target of the click isn't the container...
              && container.has(e.target).length === 0) // ... nor a descendant of the container
          {
              container.hide(200);
          }
      });

This code works fine, however I only want the DIV to close when the cursor is further away then 200px from my DIV. Is this possible, and how should I do this?

Answer 1

To do what you want, I think you have to wrap your div in another div which is 400px larger, and check if the click is in the new div.

The HTML will be :

<div class="wrapper">
    <div class="polnamen">
        <!-- Your code here -->
    </div>
</div>

The CSS :

.wrapper {
    padding: 200px;
    position: relative;
    top: -200px;
    left: -200px;
}

The jQuery :

$(document).mouseup(function (e) {
          var container = $(".wrapper");

          if (!container.is(e.target) // if the target of the click isn't the container...
              && container.has(e.target).length === 0) // ... nor a descendant of the container
          {
              container.hide(200);
          }
      });

Answer 2

You can get the position of the click relative to the document from the pageX and pageY event properties when you receive the click.

You can get the position (relative to the document) and dimensions of the div from the jQuery offset (confusingly, it's offset not position ) , width , and height functions.

Then a bit of math tells you whether the click is far enough away.

Answer 3

This code may help you..

First find the distance of mouse cursor from element and if we find it 200px away then we need to fire our

var mX, mY, distance;    
$element  = $('#element');

function calculateDistance(elem, mouseX, mouseY) 
{
       return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
}

$(document).mousemove(function(e) 
{  
    mX = e.pageX;
    mY = e.pageY;
    distance = calculateDistance($element, mX, mY);

    if(distance == 200)
    {
        // Start : Write your action here --------------- //
        var container = $(".polnamen");

      if (!container.is(e.target) // if the target of the click isn't the container...
          && container.has(e.target).length === 0) // ... nor a descendant of the container
      {
          container.hide(200);
      }
     // End : Write your action here --------------- // 
   }         
});