I want to use an if statement to check if the mouse is inside a certain div, something like this:
if ( mouse is inside #element ) {
// do something
} else {
return;
}
This will result in the function to start when the mouse is inside #element, and stops when the mouse is outside #element.
you can register jQuery handlers:
var isOnDiv = false;
$(yourDiv).mouseenter(function(){isOnDiv=true;});
$(yourDiv).mouseleave(function(){isOnDiv=false;});
no jQuery alternative:
document.getElementById("element").addEventListener("mouseenter", function( ) {isOnDiv=true;});
document.getElementById("element").addEventListener("mouseout", function( ) {isOnDiv=false;});
and somewhereelse:
if ( isOnDiv===true ) {
// do something
} else {
return;
}
Well, that's kinda of what events are for. Simply attach an event listener to the div you want to monitor.
var div = document.getElementById('myDiv');
div.addEventListener('mouseenter', function(){
// stuff to do when the mouse enters this div
}, false);
If you want to do it using math, you still need to have an event on a parent element or something, to be able to get the mouse coordinates, which will then be stored in an event object, which is passed to the callback.
var body = document.getElementsByTagName('body');
var divRect = document.getElementById('myDiv').getBoundingClientRect();
body.addEventListener('mousemove', function(event){
if (event.clientX >= divRect.left && event.clientX <= divRect.right &&
event.clientY >= divRect.top && event.clientY <= divRect.bottom) {
// Mouse is inside element.
}
}, false);
But it's best to use the above method.
simply you can use this:
var element = document.getElementById("myId");
if (element.parentNode.querySelector(":hover") == element) {
//Mouse is inside element
} else {
//Mouse is outside element
}
Improving using the comments
const element = document.getElementById("myId");
if (element.parentNode.matches(":hover")) {
//Mouse is inside element
} else {
//Mouse is outside element
}
$("div").mouseover(function(){
//here your stuff so simple..
});
You can do something like this
var flag = false;
$("div").mouseover(function(){
flag = true;
testing();
});
$("div").mouseout(function(){
flag = false;
testing();
});
function testing(){
if(flag){
//mouse hover
}else{
//mouse out
}
}
Related
I have an iOS uiwebview with multiple imagemaps that I need to catch clicks on, so I can handle scaling on different iOS devices. The click handler I install works on the first image, but not on subsequent images. How do I make the click handler work on multiple images? The relevant code is below:
$.fn.imageMapSetup2 = function () {
$('img').each(function () {
if (typeof ($(this).attr('usemap')) == 'undefined') {
return;
}
var img = $(this);
// add click handler
img.on('click', function (event) {
img.imgClick(event);
});
});
};
$.fn.imgClick = function (mouseDown) {
mouseDown.preventDefault();
var $img = this;
var map = $img.attr('usemap').replace('#', '');
$('map[name="' + map + '"]').find('area').each(function () {
var $this = $(this),
coords = $this.attr('coords').split(',');
// lots of scaling code omitted
if (mouseX >= left && mouseX <= right &&
mouseY >= top && mouseY <= bottom) {
window.location = $this.attr('href');
}
});
};
FYI I have debugged the code in Safari and function imgClick() is not getting called for the second and subsequent images.
Add a click event listener to the parent element of the images. This could be the body element. Pass the event as an argument. Then, check the event, and use that variable to make changes to your image.
document.addEventListener("click", function (event) {
if (!event.target.tagName === "img") return;
if (typeof event.target.getAttribute("usemap") == "undefined") {
return;
}
imgClick(event);
});
I would like to catch some events for a specific div if the user clicked on the div (focus the div), keyboard events are catch (not if the last click was out of the div (unfocus the div)
I tried some things, but haven't succeeded : JSFiddle
document.getElementById("box").onkeydown = function(event) {
if (event.keyCode == 13) { // ENTER
alert("Key ENTER pressed");
}
}
This code doesn't work even if I click on the div.
Pure JS solution please
The div element isn't interactive content by default. This means that there isn't a case where the return key will ever trigger on it. If you want your div element to be interactive you can give it the contenteditable attribute:
<div id="box" contenteditable></div>
In order to now fire the event you need to first focus the div element (by clicking or tabbing into it). Now any key you press will be handled by your onkeydown event.
JSFiddle demo.
Giving the 'div' a tabindex should do the trick, so the div can have the focus:
<div id="box" tabindex="-1"></div>
If you click on the div it gets the focus and you can catch the event.
JSFIDDEL
If you set 'tabindex' > 0 you can also select the div using TAB.
You could catch all the click events, then check if the event target was inside the div:
var focus_on_div = false;
document.onclick = function(event) {
if(event.target.getAttribute('id') == 'mydiv') {
focus_on_div = true;
} else {
focus_on_div = false;
}
}
document.onkeyup = function(event) {
if (focus_on_div) {
// do stuff
}
}
try this code i hope this work
var mousePosition = {x:0, y:0};
document.addEventListener('mousemove', function(mouseMoveEvent){
mousePosition.x = mouseMoveEvent.pageX;
mousePosition.y = mouseMoveEvent.pageY;
}, false);
window.onkeydown = function(event) {
var x = mousePosition.x;
var y = mousePosition.y;
var elementMouseIsOver = document.elementFromPoint(x, y);
if(elementMouseIsOver.id == "box" && event.keyCode == "13") {
alert("You Hate Enter Dont You?");
}
}
DEMO
I have a javascript bookmarklet I put together to make an arduous task a little more bearable. Essentially I am going through hundreds of pages of training material and making sure that all of it has been properly swapped from Helvetica to Arial. The bookmarklet code is below, but a quick breakdown is that it creates a mousemove event listener and a small, absolutely positioned div. On mousemove events, the div moves to the new mouse position (offset by 10px down and right), gets the element under the mouse with elementFromPoint and shows the font-family property for that element. oh and it changes it's background color based on whether Arial appears within the property.
var bodyEl=document.getElementsByTagName("body")[0];
var displayDiv=document.createElement("div");
displayDiv.style.position="absolute";
displayDiv.style.top="0px";
displayDiv.style.top="0px";
bodyEl.appendChild(displayDiv);
function getStyle(el,styleProp) {
var camelize = function (str) {
return str.replace(/\-(\w)/g, function(str, letter){
return letter.toUpperCase();
});
};
if (el.currentStyle) {
return el.currentStyle[camelize(styleProp)];
} else if (document.defaultView && document.defaultView.getComputedStyle) {
return document.defaultView.getComputedStyle(el,null)
.getPropertyValue(styleProp);
} else {
return el.style[camelize(styleProp)];
}
}
function getTheElement(x,y) {return document.elementFromPoint(x,y);}
fn_displayFont=function displayFont(e) {
e = e || window.event;
var divX=e.pageX+10;
var divY=e.pageY+10;
var font=getStyle(getTheElement(e.pageX,e.pageY),"font-family");
if (font.toLowerCase().indexOf("arial") != -1) {
displayDiv.style.backgroundColor = "green";
} else {
displayDiv.style.backgroundColor = "red";
}
displayDiv.style.top= divY.toString() + "px";
displayDiv.style.left= divX.toString() + "px";
displayDiv.style.fontFamily=font;
displayDiv.innerHTML=font;
}
window.addEventListener('mousemove', fn_displayFont);
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 27) {
window.removeEventListener('mousemove', fn_displayFont);
bodyEl.removeChild(displayDiv);
}
};
(for the record, I stole the style determining code from an answer here on SO, but I lost the tab not long after. Thanks, anonymous internet guy!)
So this all works great - UNTIL I try to hover over a part of the page that is scrolled down from the top. The div sits at where it would be if I had the mouse on the very bottom of the screen while scrolled to the top of the page, and if I scroll down far enough firebug starts logging that e.pageX is undefined.
Any ideas?
Alrighty then, figured it out. I saw http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/276742/elementfrompoint-problems-when-window-has-been-scrolled- and thought it meant I had to minus the pageoffset straight away from the e.pageX/Y values, before I used it to calculate the div position or anything else, this just broke everything for me so I assumed it must have been unrelated - not so!
From what I now understand the elementFromPoint method takes a point relative in the current view of the browser, which is to say, base on the top left corner of what can currently be seen, not the page as a whole. I fixed it by just taking the offset from the X and Y values when I was getting the element. The now-working code is below.
var bodyEl=document.getElementsByTagName("body")[0];
var displayDiv=document.createElement("div");
displayDiv.style.position="absolute";
displayDiv.style.top="0px";
displayDiv.style.top="0px";
bodyEl.appendChild(displayDiv);
function getStyle(el,styleProp) {
var camelize = function (str) {
return str.replace(/\-(\w)/g, function(str, letter){
return letter.toUpperCase();
});
};
if (el.currentStyle) {
return el.currentStyle[camelize(styleProp)];
} else if (document.defaultView && document.defaultView.getComputedStyle) {
return document.defaultView.getComputedStyle(el,null)
.getPropertyValue(styleProp);
} else {
return el.style[camelize(styleProp)];
}
}
function getTheElement(x,y) {return document.elementFromPoint(x,y);}
fn_displayFont=function displayFont(e) {
e = e || window.event;
var divX=e.pageX + 10;
var divY=e.pageY + 10;
var font=getStyle(getTheElement(e.pageX - window.pageXOffset,e.pageY - window.pageYOffset),"font-family");
if (font.toLowerCase().indexOf("arial") != -1) {
displayDiv.style.backgroundColor = "green";
} else {
displayDiv.style.backgroundColor = "red";
}
displayDiv.style.top= divY.toString() + "px";
displayDiv.style.left= divX.toString() + "px";
displayDiv.style.fontFamily=font;
displayDiv.innerHTML=font;
}
document.addEventListener('mousemove', fn_displayFont);
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 27) {
window.removeEventListener('mousemove', fn_displayFont);
bodyEl.removeChild(displayDiv);
}
};
Hmm instead of checking with the mouse, why not just check every leaf node? If any leaf node has a font-family of arial, then it should indicate that one of its ancestors has a font-family of Arial.
First you need to get jquery onto the page. Try this bookmarklet
Then run this code:
(function(){
var arialNodes = $('div:not(:has(*))').filter(function(){
return $(this).css('font-family').toLowerCase().indexOf("arial") != -1;
});
})();
The arialNodes variable should contain every leaf node that has a font-family of 'Arial'. You can then use this to figure out which parent element has the declaration.
Or if you just want to see if a page is compliant or not, just check the length.
Updated
Updated to reflect comments below
(function() {
var arialNodes = $('*:not(:has(*))', $('body')).filter(function() {
return $(this).css('font-family').toLowerCase().indexOf("arial") === -1;
});
var offendingParents = [];
arialNodes.each(function(){
var highestOffendingParent = $(this).parentsUntil('body').filter(function(){
return $(this).css('font-family').toLowerCase().indexOf("arial") === -1;
}).last();
if(offendingParents.indexOf(highestOffendingParent) === -1){
offendingParents.push(highestOffendingParent);
}
});
})();
Is there any way to disable onclick events from firing for events on a particular z-index, besides running through all elements and setting their onclick to function(){} if they are on that z-index?
Edit:
At this point, the best I can come up with is to hook each function in the DOM tree recursively:
function preventZIndexClicks(elem) {
// ensure not a text node
if(!elem.popupflag) { elem.popupflag = 1;
if(elem.onclick) { var temp = elem.onclick;
elem.onclick = function(e) {
if(g_threshold > elem.style.zIndex)
return;
temp(e);}
}
}
// Call recusively on elem.childNodes
}
Of course, then I would have to deal with the rather annoying IE issues with setting custom properties on DOM elements...
You could check the z-index in the event and let it bubble through the rest.
function onclick(e) {
if(this.style.zIndex == 10) return;
//do stuff
}
EDIT:
Just to clarify how i mean, consider this:
<div id="div1" style="background-color: red;width:100px;height:100px;z-index:1">
<div id="div2" style="background-color: green;width:50px;height:50px;z-index:2">
<div id="div3" style="background-color: blue;width:25px;height:25px;z-index:3">
</div>
</div>
</div>
With this javascript:
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");
bind(div1,"click",click);
bind(div2,"click",click);
bind(div3,"click",click);
function click(e) {
if(this.style.zIndex == 2) return;
alert(this.style.backgroundColor);
}
function bind(element,event,callback){
var onevent="on"+event;
if(element.addEventListener)
element.addEventListener(event,callback,false);
else if(element.attachEvent)
element.attachEvent(onevent,callback);
else{
var e=element[onevent];
element[onevent]=function(){
var h=e.apply(this,arguments),cbk=callback.apply(this,arguments);
return h==undefined?cbk:(cbk==undefined?h:cbk&&h);
}
}
}
Now, the click will work as follow:
click red: -> alert "red"
click green: -> alert "red"
click blue: -> alert "blue" -> alert "red"
As you see the green element with z-index:2; will not "fire" the event
What about something like:
<script type="text/javascript">
window.onclick = function(e)
{
var targetElem;
if (!e)
{
var e = window.event;
}
if (e.target)
{
targetElem = e.target;
}
else if (e.srcElement)
{
targetElem = e.srcElement;
}
if (targetElem.nodeType == document.TEXT_NODE)
{
targetElem = targetElem.parentNode;
}
if (targetElem.style.zIndex == 100)
{
// do stuff
}
};
</script>
with jQuery:
$('*').each(function() {
var $this = $(this);
if ($this.css('z-index') < g_threshold) {
$this.unbind('click'); //unbinds all click handlers from a DOM element
$this.click(function(e) {
e.stopPropagation();
});
}
});
this is basically like what you do, but requires no additional attributes or whatever else you dislike. If you need to leave, say, textbox untouched, then use $('*').not('input:text')
$(document).click(function(evt) {
var target = evt.currentTarget;
var inside = $(".menuWraper");
if (target != inside) {
alert("bleep");
}
});
I am trying to figure out how to make it so that if a user clicks outside of a certain div (menuWraper), it triggers an event.. I realized I can just make every click fire an event, then check if the clicked currentTarget is same as the object selected from $(".menuWraper"). However, this doesn't work, currentTarget is HTML object(?) and $(".menuWraper") is Object object? I am very confused.
Just have your menuWraper element call event.stopPropagation() so that its click event doesn't bubble up to the document.
Try it out: http://jsfiddle.net/Py7Mu/
$(document).click(function() {
alert('clicked outside');
});
$(".menuWraper").click(function(event) {
alert('clicked inside');
event.stopPropagation();
});
http://api.jquery.com/event.stopPropagation/
Alternatively, you could return false; instead of using event.stopPropagation();
if you have child elements like dropdown menus
$('html').click(function(e) {
//if clicked element is not your element and parents aren't your div
if (e.target.id != 'your-div-id' && $(e.target).parents('#your-div-id').length == 0) {
//do stuff
}
});
The most common application here is closing on clicking the document but not when it came from within that element, for this you want to stop the bubbling, like this:
$(".menuWrapper").click(function(e) {
e.stopPropagation(); //stops click event from reaching document
});
$(document).click(function() {
$(".menuWrapper").hide(); //click came from somewhere else
});
All were doing here is preventing the click from bubbling up (via event.stopPrpagation()) when it came from within a .menuWrapper element. If this didn't happen, the click came from somewhere else, and will by default make it's way up to document, if it gets there, we hide those .menuWrapper elements.
try these..
$(document).click(function(evt) {
var target = evt.target.className;
var inside = $(".menuWraper");
//alert($(target).html());
if ($.trim(target) != '') {
if ($("." + target) != inside) {
alert("bleep");
}
}
});
$(document).click((e) => {
if ($.contains($(".the-one-you-can-click-and-should-still-open").get(0), e.target)) {
} else {
this.onClose();
}
});
I know that the question has been answered, but I hope my solution helps other people.
stopPropagation caused problems in my case, because I needed the click event for something else. Moreover, not every element should cause the div to be closed when clicked.
My solution:
$(document).click(function(e) {
if (($(e.target).closest("#mydiv").attr("id") != "mydiv") &&
$(e.target).closest("#div-exception").attr("id") != "div-exception") {
alert("Clicked outside!");
}
});
http://jsfiddle.net/NLDu3/
I do not think document fires the click event. Try using the body element to capture the click event. Might need to check on that...
This code will open the menu in question, and will setup a click listener event. When triggered it will loop through the target id's parents until it finds the menu id. If it doesn't, it will hide the menu because the user has clicked outside the menu. I've tested it and it works.
function tog_alerts(){
if($('#Element').css('display') == 'none'){
$('#Element').show();
setTimeout(function () {
document.body.addEventListener('click', Close_Alerts, false);
}, 500);
}
}
function Close_Alerts(e){
var current = e.target;
var check = 0;
while (current.parentNode){
current = current.parentNode
if(current.id == 'Element'){
check = 1;
}
}
if(check == 0){
document.body.removeEventListener('click', Close_Alerts, false);
$('#Element').hide();
}
}
function handler(event) {
var target = $(event.target);
if (!target.is("div.menuWraper")) {
alert("outside");
}
}
$("#myPage").click(handler);
try this one
$(document).click(function(event) {
if(event.target.id === 'xxx' )
return false;
else {
// do some this here
}
});
var visibleNotification = false;
function open_notification() {
if (visibleNotification == false) {
$('.notification-panel').css('visibility', 'visible');
visibleNotification = true;
} else {
$('.notification-panel').css('visibility', 'hidden');
visibleNotification = false;
}
}
$(document).click(function (evt) {
var target = evt.target.className;
if(target!="fa fa-bell-o bell-notification")
{
var inside = $(".fa fa-bell-o bell-notification");
if ($.trim(target) != '') {
if ($("." + target) != inside) {
if (visibleNotification == true) {
$('.notification-panel').css('visibility', 'hidden');
visibleNotification = false;
}
}
}
}
});