How to detect if mouse cursor is out of element?

Question

I have a listener which runs when I click on document.

document.addEventListener('click', print);

function print(element)
{  
  doSomething();
}

It creates div id=panel, where I print some information.

When I run the print function I would like to detect whether I clicked outside of the div#panel (The panel exists when I click second time).

I wish not to use the mouseout event listener because I think it is redundant to use listener for mouse movements when the event click is already fired.

How to detect when I clicked out of div#panel?

Possible duplicate of [Use jQuery to hide a DIV when the user clicks outside of it](http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it) — Drew Kennedy, Aug 01 '16 at 14:05
Possible duplicate of [How to detect a click outside an element?](http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element) — Liam, Aug 01 '16 at 14:06

eisbehr · Accepted Answer · 2016-08-01T14:24:22.613

1

You can check the target of jQuery's click event, which element it was:

$(document).click(function(e) {
    var target = $(e.target);

    if( !target.is("#panel") && target.closest("#panel").length === 0 ) {
        // click was not on or inside #panel
    }
});

edited Aug 01 '16 at 14:24

answered Aug 01 '16 at 14:05

eisbehr

12,243
7
38
63

Are you sure this works when the div#panel contains ul li items? I click on one of the list items in the panel and it looks like it did not find the node. I think that when the e.target.id is the list item id and not the parent's parent id (div#panel) so the result is false. **Correction:** I mean - when I click on the panel so I message that this is not a panel – John Boe Aug 01 '16 at 14:20
That depends on the `#panel` contents, but yes. That could happen. If there are other elements you have to do a check like `&& $(e.target).closest("#panel").length == 0`. I've edited this. @user1141649 – eisbehr Aug 01 '16 at 14:23
I have made it working when I changed the condition to `!$(e.target).is("div#panel ul li")` Thank you – John Boe Aug 01 '16 at 14:31

score 0 · Answer 2 · answered Aug 01 '16 at 14:11

Your event handler gets passed an event object, not an element. Since you are listening for the click event, the event will be of type MouseEvent and that event object will have a target property which you can use to check if the target element matches your desired element.

function handler(event) {
    if (event.target == document.getElementById("panel")) {    
        // Do stuff
    }
}

document.addEventListener('click', handler);

Edit: I intentionally gave the vanilla JS answer since your own code fragments don't use jQuery. But jQuery wouldn't change anything as its event handling API is almost just a thin wrapper over JS.

score 0 · Answer 3 · answered Aug 01 '16 at 14:17

I am just using event from the click. Here it is

var elem=document.getElementById("elem");
var rects=elem.getBoundingClientRect();//get the bounds of the element

document.addEventListener('click', print);

function print(e)
{  
 //check if click position is inside or outside target element
 if(e.pageX<= rects.left +rects.width && e.pageX>= rects.left &&  e.pageY<= rects.top +rects.height && e.pageY>= rects.top){
    console.log("Inside element");
 }   
 else{
   console.log("Outside element");
}
}

JS Bin link : https://jsbin.com/pepilehigo/edit?html,js,console,output

score 0 · Answer 4 · answered Aug 01 '16 at 14:41

A different approach, using only javascript is:

function print(evt) {
  if (!(evt.target.tagName == 'DIV' && evt.target.classList.contains('myDiv'))) {
    var div = document.createElement('div');
    div.classList.add('myDiv');
    div.textContent="new div";
    document.body.appendChild(div);
  }
}

window.onload = function() {
  document.addEventListener('click', print);
}

 .myDiv {
            border:1px solid green;
        }

How to detect if mouse cursor is out of element?

4 Answers4