How to check if the cursor is over an element? [duplicate] - javascript

This question already has answers here:
pure javascript to check if something has hover (without setting on mouseover/out)
(5 answers)
Closed 3 years ago.
How can I check whether the cursor is over a div on the html page with JQuery/Javascript?
I'm trying to get cursor coordinates to see if they are in the rectangle of my element. Maybe there are predefined methods?
UPD, don't say anything about hover events, etc. I need some method which will return true/false for some element at the page, like:
var result = underElement('#someDiv'); // true/false

I'm not really sure why you wish to avoid hover so badly: consider the following script
$(function(){
$('*').hover(function(){
$(this).data('hover',1); //store in that element that the mouse is over it
},
function(){
$(this).data('hover',0); //store in that element that the mouse is no longer over it
});
window.isHovering = function (selector) {
return $(selector).data('hover')?true:false; //check element for hover property
}
});
Basically the idea is that you use hover to set a flag on the element that the mouse is over it/no longer over it. And then you write a function that checks for that flag.

For the sake of completeness I will add a couple of changes that I believe will help a bit for performance.
Use delegation to bind the event to one element, instead of binding it to all existent elements.
$(document).on({
mouseenter: function(evt) {
$(evt.target).data('hovering', true);
},
mouseleave: function(evt) {
$(evt.target).data('hovering', false);
}
}, "*");
Add a jQuery pseudo-expression :hovering.
jQuery.expr[":"].hovering = function(elem) {
return $(elem).data('hovering') ? true : false;
};
Usage:
var isHovering = $('#someDiv').is(":hovering");

The simplest way would probably be to just track which element the mouse is over at all times. Try something like:
<div id="1" style="border:solid 1px red; width:50px; height:50px;"></div>
<div id="2" style="border:solid 1px blue; width:50px; height:50px;"></div>
<div id="3" style="border:solid 1px green; width:50px; height:50px;"></div>
<input type="hidden" id="mouseTracker" />
​$(document).ready(function() {
$('*').hover(function() {
$('#mouseTracker').val(this.id);
});
});
and then your function is simply
function mouseIsOverElement(elemId) {
return elemId === $('#mouseTracker').val();
}

Can't you just check $(select).is(':hover') ?

I did this with custom function:
$(document).mouseup(function(e) {
if(UnderElement("#myelement",e)) {
alert("click inside element");
}
});
function UnderElement(elem,e) {
var elemWidth = $(elem).width();
var elemHeight = $(elem).height();
var elemPosition = $(elem).offset();
var elemPosition2 = new Object;
elemPosition2.top = elemPosition.top + elemHeight;
elemPosition2.left = elemPosition.left + elemWidth;
return ((e.pageX > elemPosition.left && e.pageX < elemPosition2.left) && (e.pageY > elemPosition.top && e.pageY < elemPosition2.top))
}

Related

how do i trigger onMouseEnter for elements behind other elements

I'm trying to trigger mouseEnter event when mouse is on top of multiple elements.
I want both mouseEnter events to trigger when the mouse is at the center, and preferably for both to turn yellow.
Run the code snippet below for an example:
<!DOCTYPE html>
<html>
<head>
<style>
div:hover {
background-color: yellow;
}
div {
width: 100px;
height:100px;
background:green;
border: 2px solid black;
}
.second {
transform:translateX(50%) translateY(-50%);
}
</style>
<script>
function onhover(){console.log('hovered')}
</script>
</head>
<body>
<div onmouseenter=onhover()></div>
<div onmouseenter=onhover() class='second'></div>
</body>
</html>
According to MDN, the mouseenter event does not bubble, whereas the mouseover event does. However, even if it DID bubble, your elements currently have no relation to one another, thus the mouse events are captured by the upper element.
One possible way around this is with the amazing elementsFromPoint function in JavaScript, which makes quick work of solving your issue:
// Only the IDs of the elments you are interested in
const elems = ["1", "2"];
// Modified from https://stackoverflow.com/a/71268477/6456163
window.onload = function() {
this.addEventListener("mousemove", checkMousePosition);
};
function checkMousePosition(e) {
// All the elements the mouse is currently overlapping with
const _overlapped = document.elementsFromPoint(e.pageX, e.pageY);
// Check to see if any element id matches an id in elems
const _included = _overlapped.filter((el) => elems.includes(el.id));
const ids = _included.map((el) => el.id);
for (const index in elems) {
const id = elems[index];
const elem = document.getElementById(id);
if (ids.includes(id)) {
elem.style.background = "yellow";
} else {
elem.style.background = "green";
}
}
}
div {
width: 100px;
height: 100px;
background: green;
border: 2px solid black;
}
.second {
transform: translateX(50%) translateY(-50%);
}
<div id="1"></div>
<div id="2" class="second"></div>
I think that you can not without javascript, and with it it's a bit tricky, you have to check on every mousemove if the coordinates of the mouse are in de bounding box of the element, this fill fail with elements with border radius but for the others it's ok
<script>
var hovered=[]
function addHover(element){hovered.push(element)}
function onhover(element){console.log("hovered",element)}
function onCustomHover(e){
hovered.forEach((el,i)=>{
let bounds=el.getBoundingClientRect()
if (e.pageX > bounds.left && e.pageX < bounds.bottom &&
e.pageY > bounds.top && e.pageY < bounds.right ) {
onhover(i);
}
})
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2" class='second'></div>
<script>
document.body.addEventListener('mousemove', onCustomHover, true);//{capture :false});
addHover(document.getElementById("div1"))
addHover(document.getElementById("div2"));
</script>
I would appreciate if you could rate the answer if that was usefull to you because I can not make comments yet <3
It will be easier to change your code a little bit.
ex. Add to your div elements class box.
Add to your styles class with name hovered which will look like:
.hovered {
background-color: yellow;
}
Into JS(between script tag) add event listeners (code not tested, but idea is shown), also move script to place before closing body tag:
const boxes = document.querySelectorAll('.box');
boxes.forEach(box => {
box.addEventListener('mouseover', () => {
boxes.forEach(b => b.classList.add('hovered'));
});
box.addEventListener('mouseout', () => {
boxes.forEach(b => b.classList.remove('hovered'));
});
});
The problem is that elements are blocking the mouse such that elements in the background do not receive the event. With the exception that events bubble to the parent.
Given that you could change your markup slightly to get this effect.
First add a class to your boxes so we can easily find them in JavaScript:
<div class="box"></div>
<div class="box second"></div>
Then adapt the CSS such that this background change is toggled with a class instead:
.box.hovered {
background-color: yellow;
}
And then the JavaScript:
// Get all box elements
const boxes = document.querySelectorAll('.box');
boxes.forEach(box => {
// For each box attach a listener to when the mouse moves
box.addEventListener('mousemove', (ev) => {
// Get the position of the mouse
const { x, y } = ev;
boxes.forEach(b => {
// for each box get it's dimension and location
const rect = b.getBoundingClientRect();
// check if the pointed is in the box
const flag = x > rect.left && x < rect.right && y > rect.top && y < rect.bottom;
// toggle the class
b.classList.toggle('hovered', flag);
});
});
});
This can be improved a lot, especially if you have more boxes by getting the rectangles beforehand and then using the index in the forEach to link the box to it's rectangle:
const boxes = document.querySelectorAll('.box');
const rects = [...boxes].map(box => box.getBoundingClientRect());
Another improvement is to use the fact that events bubble to the parent, that means you could wrap all boxes in one parent and only add a listener to this parent.

Keep jQuery `Appended` Element Open When Hovering It

ALREADY ANSWERED MYSELF (See Answers)
So leading on from jQuery `[jQuery created Element].is(“:hover”)` Only Seems To Work In Chrome.
A bit more background:
I was trying to maintain hover when we moved from an element already in the DOM to an element added by jQuery's .append() method.
I was using .is(":hover"). This method was working fine in Chrome but no other browsers. As we found out (from the link above) it removed some time ago.
OLD :HOVER METHOD
var
hov = $("<div class=\"over\">I'm Over You</div>"),
box = $("<div>Result: WAITING</div>")
$("body").append(hov).append(box);
$("#MeHover").on('mouseleave', function(){
var d = new Date();
box.text("Result: " + hov.is(":hover").toString().toUpperCase() );
});
On the mouseleave listener, keep open if either the hovered or hoverer element are the relatedTarget
var $hovered = $('#MeHover');
var $hoverer = $("<div class=over>I'm Over You</div>");
$("body").append($hoverer);
$hovered.add($hoverer).mouseenter(function() {
$hoverer.fadeIn();
}).mouseleave(function(e) {
if (e.relatedTarget != $hoverer[0] && e.relatedTarget != $hovered[0])
$hoverer.fadeOut();
});
.over {
display: none;
position: absolute;
top: 20px;
left: 0;
right: 0;
background: green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MeHover">
Hover Over Me
</div>
So I toyed with tracking the mouse and seeing if it was in the container, but it seemed too expensive and complex to implement. In the end, I decided to go for the .data() route as per the below.
I also have a fiddle demonstrating: https://jsfiddle.net/glenn2223/uk7e7rwe/
CODE
var
hov = $("<div class=\"over\">I'm Over You</div>"),
box = $("<div>Result: WAITING</div>");
$("body").append(hov).append(box);
$("#MeHover").add(hov).mouseenter(function () {
$("#MeHover").data("keepHover", 1);
hov.fadeIn();
}).mouseleave(function () {
$("#MeHover").removeData("keepHover");
CloseHover();
});
function CloseHover(){
clearTimeout(t);
var t = setTimeout(function () {
if ($("#MeHover").data("keepHover") != 1)
hov.fadeOut();
}, 300);
}

Trying to enlarge images on an HTML page

I'm new to coding and am trying to enlarge an image onclick and then un-enlarge an image onclick, using JavaScript. I've tried using jQuery but jQuery doesn't seem to work so I'm simply using JavaScript.
This is the JavaScript:
var myImg1 = document.getElementById('myImg1')
var myImg2 = document.getElementById('myImg2')
var myImg3 = document.getElementById('myImg3')
myImg1.onclick = function() {
if (myImg1.style.height = '100px') {
myImg1.style.height = '1000px'
return
} else {
myImg1.style.height = '100px'
return
}
}
The image has the class assigned 'i' in HTML and CSS, which sets the width as 100px.
The code does successfully enlarge the image to 1000px but it doesn't un-enlarge.
I've tried quite a few different methods, but mostly with jQuery and I can't get jQuery to work.
you need to use 2 equal signs to compare two things, one equal sign means you are trying to set a value for that variable.
if (myImg1.style.height == '100px') {
myImg1.style.height = '1000px'
// return
}
as Pato Salazar mentioned in the comments the return statement isn't needed.
JavaScript:
var myImg1 = document.getElementById('Img1');
myImg1.onclick = function() {
if (myImg1.style.height == '1000px') {
myImg1.style.height = '100px';
} else {
myImg1.style.height = '1000px';
}
}
OR
jQuery:
jQuery(document).ready(function() {
jQuery('#Img1').click(function() {
jQuery('#Img1').toggleClass('img1_1000px');
});
});
Both work. If you need jQuery, use to write < img src="Img1.jpg" id="Img1" style="height: 100px;" > and .img1_1000px { height: 1000px!important; } in style.
I hope I helped you.

use setTimeout with addEventListener to recall function with same element

I have a div that expands and retracts to show/hide content. I'm using buttons with addEventListner to show/hide the div. I have more then one div I want to show/hide and more than one set of show/hide buttons. I'm therefore trying to reuse the same two functions that show/hide the content but with different event handlers.
The problem I'm having is passing the relevant div id to the function so the function knows whichdiv element to show/hide for each function call. The function recognizes the div id on the first interation however when recalled by setTimeout the div id is no longer recognized. I have tried adding the variable used for div id to setTimeout without any joy.
I'm aware I can use inline javascript for this but am trying to avoid that.
Any ideas how I can solve this using external javascript as I'm trying here ?
HTML:
<button id='expand'>expand</button><button id='retract'>retract</button>
<div id="latinText">
<p>...some content here</p>
</div>
<button id='expandToo'>expandToo</button><button id='retractToo'>retractToo</button>
<div id='latinText2'>
<p>...some more content here</p>
</div>
Javascript:
function divExp(elem) {
var element = document.getElementById(elem);
var h = element.offsetHeight;
var scrollHeight = element.scrollHeight;
var divTimer = setTimeout(divExp, 20);
if(h < scrollHeight) {
h += 5;
} else {
clearTimeout(divTimer);
}
element.style.height = h+'px' ;
}
function divRetract(elem2) {
var element = document.getElementById(elem2);
var h = element.offsetHeight;
var retTimer = setTimeout(divRetract, 20);
if(h > 0) {
h -= 5;
} else {
clearTimeout(retTimer);
}
element.style.height = h+'px' ;
}
document.getElementById('expand').addEventListener('click', function(){ divExp('latinText'); }, false);
document.getElementById('retract').addEventListener('click',function (){ divRetract('latinText') }, false);
document.getElementById('expandToo').addEventListener('click', function(){ divExp('latinText2'); }, false);
document.getElementById('retractToo').addEventListener('click',function(){ divRetract('latinText2'); }, false);
I am not sure if I understood exactly what the problem is, but it sounds like you need to pass an argument to the function you want to call with setTimeout?
var retTimer = setTimeout(function() {
divRetract(elem2)
}, 20);
You should write
var divTimer = setTimeout(function(){divExp(elem)}, 20);
instead of
var divTimer = setTimeout(divExp, 20);
than You'll pass the same element to a function, called by timeout. Otherwise You call divExp() function without parameters

How can I find current element on mouseover using jQuery?

How can I get the class name of the current element that is on mouseover? For example
When a mouse is over from div to a, I want to get the class name of a div element. How can I get it using jQuery?
you can give a try to this:
window.onmouseover=function(e) {
console.log(e.target.className);
};
This is my version:
function handler(ev) {
var target = $(ev.target);
var elId = target.attr('id');
if( target.is(".el") ) {
alert('The mouse was over'+ elId );
}
}
$(".el").mouseleave(handler);
Working fiddle: http://jsfiddle.net/roXon/dJgf4/
function handler(ev) {
var target = $(ev.target);
var elId = target.attr('id');
if( target.is(".el") ) {
alert('The mouse was over'+ elId );
}
}
$(".el").mouseleave(handler);
.el{
width:200px;
height:200px;
margin:1px;
position:relative;
background:#ccc;
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Hover an element and refresh the page, than move your mouse away.</p>
<div id="element1" class="el"></div>
<div id="element2" class="el"></div>
<div id="element3" class="el"></div>
<div id="element4" class="el"></div>
<div id="element5" class="el"></div>
<div id="element6" class="el"></div>
<div id="element7" class="el"></div>
<div id="element8" class="el"></div>
<div id="element9" class="el"></div>
Do you want the class name of the div on which the mouseover event occurs?
If that is the case then refer this,
HTML
<div class="a">aaaaaaaa</div>
<div class="b">bbbbbbbbb</div>
jQuery
$(document).on('mouseover', 'div', function(e) {
console.log($(e.target).attr('class'));
});
jsFiddle
I have used mouseover event with target
e.target gives the element on which that event occurs
If you want to get the class name of div after leaving the mouse from it
then use "mouseleave" event instaed of "mouseover"
What most people have neglected is this request from the OP:
When mouse over div from a
Meaning you need to know you've hovered from a specific type of element, not just from any element.
I made a global var, changing to true on the mouseleave of specific elements, in your case an a element. Then, inside the hover function you need to check that it's true.
Here's a Demo
Edit: Updated fiddle demo with edge cases when hovering from a element not directly onto the div.
Get the position of element on mouseover and then get the class name
<div id="wrapper">
A<div class="divClass">DIV</div>
</div>
$('#wrapper').mouseover(function(e) {
var x = e.clientX, y = e.clientY,
elementOnMouseOver = document.elementFromPoint(x, y);
elementClass=$(elementOnMouseOver).attr('class');
alert(elementClass);
});
JSFiddle: http://jsfiddle.net/ankur1990/kUyE7/
If you don't want to apply this only on wrapper div but on whole window/document, then you can replace wrapper with window/document
$(window).mouseover(function(e){});
All depending on how you want it. This could also be an option:
»Fiddle 1«
With some more detail. This will only show as true after taking the direct path from a to div. (The tiny white space between a and div.) As in:
a -> div TRUE
a -> div -> white space in between -> div FALSE
»Fiddle 2«
Might hold up. This will also show as true if one go to the tiny white space between a and div, and then go back to div. As in:
a -> div -> white space in between -> div TRUE
var mode = 0;
$(window).on("mousemove", function(e) {
if (e.target.className === "d1") {
mode = 1;
} else {
var cc = e.target.className;
if (cc !== "d2" && mode) {
var el = $(".d1"),
d1 = {
x : el.offset().left,
y : el.offset().top,
w : el.width(),
h : el.height()
},
c = {
x : e.pageX,
y : e.pageY
};
if (c.x >= d1.x + d1.w && c.y >= d1.y && c.y <= d1.y + d1.h)
mode = 2;
else
mode = 0;
} else if (cc === "d2" && mode) {
mode = 3;
}
}
$("#status").html("Current: " + (mode == 3 ? "OVER" : "NOT OVER") + " from a" );
});
From jQuery API
<div class="className">
<span class="span">move your mouse</span>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(".className").mouseover(function() {
var n = $(this).attr("class");
$(".span").html("");
$(".span").html("The class :"+n);
});
</script>
this should work:
define a class in your style sheet:
.detectable-div{
border: white solid 1px;
}
.detectable-div:hover{
border: red solid 1px;
}
then in your js:
$('div.detectable-div:hover').mouseover(function () {
$(this) // this is your object
})

Categories