Hi guys:)If I pass on the div in the example with mouse's pointer the function print in console two times,this menans that onmousemove event is triggered two times.I have printed also the coordinates of mouse's pointer and how you can see in the image below,i don't move also verticallylly but only horizontally.How is possible that onmousemove event is triggered considered that the div is 1 pixel width?How is possible that onmousemove event is triggered two times considered that the div is 1 pixel width?
<div id="div1">
</div>
#div1{
height:200px;
width:1px;
background:red;
}
document.getElementById("div1").onmousemove= function(){
console.log("in mousemove function");
console.log(event.clientX);
console.log(event.clientY);
};
You bind onmousemove which will be called every time the mouse is moved over the element. When you hover the div you sometimes move the mouse down resolving in additional calls to the handler.
It will be more clear if you add more width to the div.
What you properly wants is onmouseenter which will be called once when you enter the div:
document.getElementById('div1').addEventListener('mouseenter', function() {
console.log('mouse entered div');
});
change the console.log to alert and you will notice that the event is fired only once. It works for me. I tried using the same code just that executed javascript on DOM ready.
I also changed the width to 20 pixels so as to be sure about it.
Here is a fiddle of your example code: https://jsfiddle.net/jy8u4y2m/
You will notice that while your div is 1px wide, it is also 200px high. This means that if you enter the div with your mouse, onmousemove will be triggered. However, if you then move your mouse down before exiting the bounds of the div, the event will continue triggering. My assumption is that you are getting multiple calls because you aren't moving your mouse perfectly horizontal.
As #andlrc posted, if you want a single trigger, you should be using mouseenter instead.
Related
My page has two divs (#red and #blue) and a mousemove event that is bound to the document object - this event cannot be changed by me. (Link to JSFiddle)
When the cursor enters the red div, the blue div is pushed down by 50px. The mousemove handler does this by
adding attribute data-moved to the blue div (this attribute adds a transition effect for the top property of the blue div and signifies that the div has been moved)
setting the top position of the blue div to 50px.
This works as expected.
When the pointer exits the red div, the blue div is pushed back up to its original position using the same transition effect that was used to push it down. To do this, I first check if the blue div has been moved (i.e. if restore.hasAttribute('data-moved') is true). If it has been moved, I bind transitionend and transitioncancel events to it and then reset its top position to 0. The change in the value of the top position triggers the transition effect, which in turn triggers the transition event. Once the transition ends or is cancelled, the transitionend and transitioncancel event handlers remove the data-moved attribute before unbinding themselves from the blue div.
This works fine 99.9% of the time but very rarely the transition event handlers fail to fire and the data-moved attribute is not removed from the blue div once it has been restored to its original position:
This problem is very difficult to reproduce and seems to occur randomly when the cursor is made to very rapidly exit and re-enter the red div as shown below:
I really want be sure that I understand what's going on here. Since I can't reproduce the problem at will, I'm not sure how to go about troubleshooting it.
The problem seems to be that the transition events don't fire when the cursor enters and exits the red div very quickly. My browser (Chome v87) is compatible with both transitionend and transitioncancel. The only other explanation I can think of is that when the cursor enters the red div, the top value's transition is queued. But if the cursor leaves red quickly enough, before the transition has had a chance to start, then the top value is unchanged when the mousemove handler queries it again and as a result, the transition events aren't fired. Is this correct?
According to W3:
Transitions are a presentational effect. The computed value of a
property transitions over time from the old value to the new value.
Therefore if a script queries the computed style of a property as it
is transitioning, it will see an intermediate value that represents
the current animated value of the property.
Thanks in advance to all willing to help. My riddle is the mouseout effect in jQuery - I'm trying to get build a function that would move an element up and down inside the container, indefinitely. When hovered, the moving should stop and stay stopped until the cursor leaves the element completely. What happens though, is that mouseover event triggers all right, however, the mouseleave event is triggered right after, when the cursor is still over the element, so the animation breaks.
Here's simple HTML:
<div id="container">
<div class="element">Some text</div>
<div class="element">Some other text</div>
<div class="element">Some more text</div>
</div>
The moving element is positioned absolutely by javascript over the top element and moves down and up, here's the example on jsfiddle
Did anyone else have to deal with this? thanks
I think you need to pull your mouseenter and mouseout events outside of your animate function. Everytime you call the animate function you are adding another mouse event to each element. This is causing it to call your animate function multiple times when you mouse out.
Here's a fiddle, I added a counter to see how many times animate function is being called.
var counter = 0;
function animate(el, dir) {
$("#count").val(counter);
counter++;
Mouse over and out a couple times and you can see that it's compounding the animate calls every time you mouse out.
So I have an element behind another, but it's still visible(its covered only partially by the element itself, but is otherwise completely covered by the margin attribute of the element above). I want to trigger a mouse event when I mouse over, but it doesn't get passed to it because of the element in front. I know how to calculate if I am over it and how to point to it, but I don't know how to send it the event onmouseover or hover or onmouseout.
If it helps I would be pointing at it by using document.getElementById("<calculated id>"). I know this works because it's ID is based off of its location within a grid, so I just have to calculate the position of the mouse and relate it to the grid.
Also the event that is supposed to happen(but isn't because of the things in front of it), is a :hover that triggers a simple transition animation via CSS.
document.getElementById('elementInFront').addEventListener('mouseenter', function(){
document.getElementById('elementBehind').DoYourStuff();
});
Does this work? I'm not sure if I understand your intention.
var item = document.getElementById("CalculatedId");
item.addEventListener("mouseover", func, false);
function func()
{
console.log("Hovered");
}
You can use the css property
pointer-events: none;
On the top element. This will allow all mouse events to "fall-through" to the element in the back. Unfortunately this doesn't work in IE, the only simple alternative for that is to make the front element's background transparent
Here is a jsfiddle of the problem:
http://jsfiddle.net/MEJgb/
I want it so when you hover over anywhere in the footer the toggledown will become active and will remain active until you move the mouse from the footer.
Your problem is the following line:
jQuery('html,body').animate({
scrollTop: jQuery("#footer_copy_right").offset().top
}, 'slow');
This causes the whole page to move adn thus the item you were hovering over is no longer being hovered over so it triggers your event again and hides your text. When I was testing this was causing the hover content to move back under my mouse and thus trigger again...
I would personally not use hover in this situation and let the user click to expand and then click again to collapse.
If you want to keep using the hover option then you need to decide what the event to trigger the collapse should be. Clearly the current choice (mouse no longer over the arrow) is insufficient.
Often what I will do is attach the hover to a block containing the visible triggering block as well as the contents that are going to be displayed. This way your content won't collapse until you have moved off the newly displayed content.
http://jsfiddle.net/AjHwM/ is an example of such a thing.
Even if I'm not sure what your actual goal is, maybe the document.elementFromPoint() method is what helps you out here.
It is invoked like
if( document.elementFromPoint( event.pageX, event.pageY ) === $('#footer')[0] ) { }
That code, within your hover aka mouseenter / mouseleave handlers, would compare the node which lays under the current absolute mouse cursor X/Y positions against the #footer node.
Ref.: MDN doc, W3C doc
Is there an alternative method or a trick to the hover method which can trigger a function when the cursor moves from one div to another as the user scrolls the page.
I have sort of got it working using some javascript (jQuery) on the hover event of the current post div. However, I've noticed the hover event only triggers when the mouse is actually moved. If the page is scrolled using the keyboard (page) up/down it does not trigger.
(I can note that soup.io for instance has found a way to get this working, but I can't find how they do it)
Unfortunately, it's quite complicated; you can no longer rely on the onMouseOver event - the only event that triggers when a page is scrolled is onScroll. The steps involved:
Go through elements, storing each of their widths, heights and offsets (distance from left/top of screen) in an array.
When the onScroll event is triggered check the last known position of the cursor against all chosen elements (go through the array) - if the cursor resides over one of the elements then call the handler.
Quick (unreliable) prototype: http://pastie.org/507589
Do you have a sample? I'm guessing that the layout of the elements on the page are blocking the mouseover event. My simple example below works as you described it should. With the cursor at the top of the page and using keyboard navigation, the mouseover events are fired.
<html>
<body>
<script>
function log(text)
{
document.getElementById('logger').value += text + "\n";
}
</script>
<div id="div1" style="background: yellow; height: 100px;margin-top: 100px" onmouseover="log('mouseover div1');">
div1
</div>
<textarea id="logger" cols="60" rows="12" style="float:right;"></textarea>
<div id="div2" style="background: red; height: 1000px" onmouseover="log('mouseover div2');">
div2
</div>
</body>
</html>
You're looking for the mousewheel event.
document.getElementById('myDiv').onmousewheel = function() {
alert('You win!');
alert('Seriously! It's just like that');
};
I only tested this in Chrome (webkit)