I have an interesting problem in disabling mouse events using the 'pointer-events' css styling.
Please refer the fiddle. It has a parent and two children div, and I make 'pointer-events' as 'none' to one of the children. If I click on that div, its mouse listeners are not triggered (this is expected) but mouse events of its parent div is triggered.
$('#parent').click(function(){
console.log("Parent clicked");
});
How to disable mouse events on the parent div, if I clicked on its children which are disabled for mouse events?
One option is to filter using an "if" condition on the parent click. But i don't need it, as I want to listen for mouse events on 'divs' present behind the parent.
Please provide some help :)
thanks,
Rethna
I couldnt make the pointer-events work as I intended, so I changed the javascript in order to achieve what you wanted.
What i did was to event.stopPropagation on the child2, so you can click him and only fire his click event, not his parent's click event.
By the way, i know little about jquery, so I wrote a mixed beetwen pure javascript and jquery, hope someone can help me translate that.
Here comes the fiddle
CSS:
#child1{
background-color:#ff0000;
width:100px;
height:100px;
pointer-events: all;
}
#child2{
background-color:#00ff00;
width:100px;
height:100px;
pointer-events: all;
}
#parent{
pointer-events: none;
}
Javascript:
$(document).ready(function(){
document.getElementById('child1').addEventListener('click', function(){
console.log("child1 clicked");
}, false);
document.getElementById('child2').addEventListener('click', function(e){
e.stopImmediatePropagation();
console.log("child2 clicked");
}, false);
document.getElementById('parent').addEventListener('click', function(){
console.log("Parent clicked");
}, false);
});
For anyone stumbling across this post, here's something very useful..
el.setPointerCapture() will focus all pointer events on given element.
not only do you isolate the node, but also gain a lot of performance as the browser stops performing hittests on anything else
Related
On the site http://themeforest.net/ there is a category dropdown that activates as the mouse hovers over the menu item (e.g. HTML, Marketing, CMS). However, I cannot seem to break on any DOM event that is attached to it (checking using Firefox debugger). The expected event listeners were something like mouseover on the <li>.
What I'd like to know is what events are attached to it (or how is this animation being triggered otherwise), how you found that information and whether these events can be emulated with $(el).trigger() or el.createEvent()
Thanks in advance.
It doesn't need to be a javascript which shows the submenu, it can also be done in plain css with the pseudo class ":hover".
I guess this is how it works on this page, since i can not see any changes in the DOM (like added classes, changed inline style). It can be done like this:
div ul {
display: none;
}
div:hover ul {
display: block;
}
With this css, ul's within div's are displayed once the div is hovered.
Anyways, regarding your question: "hover" does no really trigger a own event (as far as i know), it is more a combination of "mouseenter" and "mouseleave".
Hope this helps.
Edit: I checked the css on the page which proofes my assumption, there is the following css-rule which applies to the menu-point-li:
.header-categories__links-item:hover>.header-categories__links-dropdown
{
display: block;
}
I want to highlight an element on hover, and only that element.
This should mimic the behaviour of hovering over an element with chrome dev tools when you have the magnifying glass selected.
It's for a chrome extension I'm making.
I think I need a JS solution, as the pseudo :hover in css seems to apply to all elements in the background, i.e. container elements, so I'd need to prevent event bubbling in css, which as far as I can tell you can't do.
I have tried
$('body').children().mouseover(function(e){
$(".hova").removeClass("hova");
$(this).addClass("hova");
}).mouseout(function(e) {
$(this).removeClass("hova");
});
-css-
.hova {
background-color: pink;
}
and jquery's hover(), both always selects the container too.
I have also tried with css opacity, incase the background was covered, but it seems it always selects the parent element. I want the furthest child down the DOM that I am hovering over.
I'm sure there's some simple solution out there, maybe its over complicating as its in a chrome extension... I'm not sure
Is this what you need? http://jsbin.com/vidojamece/1/
Instead of adding the class to $(this) inside the handler, add the class to e.target (span) and return false so it doesn't bubble up to the div:
$('body').children().mouseover(function(e){
$(".hova").removeClass("hova");
$(e.target).addClass("hova");
return false;
}).mouseout(function(e) {
$(this).removeClass("hova");
});
You need to use the target element instead of 'this', which is the actual element that you hover over and use stopPropagation in order to not repeat the process for each element behind:
$('body').children().mouseover(function(e){
e.stopPropagation();
$(".hova").removeClass("hova");
$(e.target).addClass("hova");
}).mouseout(function(e) {
$(e.target).removeClass("hova");
});
You can do this with css (and js too):
*:hover {
background-color: pink;
}
or even
div:hover {
background-color: pink;
}
In js:
$('body').children().each(function() {
$(this).hover(function() {
$(".hova").removeClass("hova");
$(this).addClass("hova");
}, function() {
$(this).removeClass("hova");
});
});
Hi I am trying to hide a div on mouse enter on body, it is not working properly, the div I am trying to hide, will hide and comes again. Checkout this fiddle
Here is my code:
JS:
$(document).mouseenter(function() {
$('.jadu').hide(10);
}).mouseout(function(){
$('.jadu').show(10);
});
HTML:
<div class="jadu"></div>
CSS:
*{padding:0px;margin:0px;}
.jadu{
position:fixed;
width:100%;
height:100%;
background-color:#555;
opacity:0.8;
display:block;
z-index:3;
}
body{
background:red;
}
this is fiddle link: Fiddle
Simply use the mouseleave event.
$(document).mouseenter(function() {
$('.jadu').hide(10);
}).mouseleave(function(){
$('.jadu').show(10);
});
JS Fiddle
When you use mouseout on an element and there is a child in it (document > .jadu) the mouseout event is triggered when you hover the .jadu element (child).
Using mouseleave, this event won't be triggered when you hover a child of document.
See the fiddle;
http://jsfiddle.net/xibalbian/UaJZr/
$(document).mouseenter(function() {
$('.jadu').hide(10);
}).mouseleave(function(){
$('.jadu').show(10);
});
If the matched elements have no child element, both mouseout() and mouseleave() events are work exactly same.
If the matched elements have child element, both mouseout() and mouseleave() events are work different in the way of “event bubbling”.
You can see this page which explains clearly -> Difference between mouseout() and mouseleave()
Use mouseleave event. jsfiddle
$(document).mouseenter(function() {
$('.jadu').hide(10);
});
$(document).mouseleave(function(){
$('.jadu').show(10);
});
Visit: JsFiddle
/* Do not use equal time in hide and show: */
$(document).mouseenter(function() {
$('.jadu').hide(100);
}).mouseout(function(){
$('.jadu').show();
});
Consider a simple element, and its associated CSS:
<div id="content">Hover me !</div>
#content {
width: 100px;
height: 100px;
}
#content:hover {
transform: translateY(500px);
transition: transform 1s 500ms;
}
JSFiddle
The principle is straightforward: while the element is hovered, it must go down. The problem is, when the mouse doesn't move, that the :hover state is maintained even if the element is not physically below the mouse anymore (due to the translation). The state seems to be updated only after an mouse move.
Notice the cursor (a pointer) and its relative position with the element!
That's a real problem when a JavaScript function must be executed only if the mouse is on an element, after a timeout:
// The mouseleave event will not be called during the transition,
// unless the mouse move !
element.on('mouseenter', executeAfterTimeout);
element.on('mouseleave', cancelTimeout);
So here are my questions:
Is this behaviour normal (compliant with the norms)?
What are the solutions to avoid this problem?
Edit : To give you a context, here is what I want to do concretely: with JavaScript, I display a tooltip when the mouse is on an element (and hide it when the mouse leaves it). But the same element can be transform-ed when the user click on it. If the user simply clicks without moving the mouse, the tooltip will remain displayed, which is a real problem. How can I detect that the element is gone?
Part 1 of your question:
The principle is straightforward: while the element is hovered, it
must go down. The problem is, when the mouse doesn't move, that the
:hover state is maintained even if the element is not physically below
the mouse anymore (due to the translation). The state seems to be
updated only after an mouse move.
So here are my questions:
Is this behaviour normal (compliant with the norms)?
Yes. This behaviour is normal. Although not specified verbatim in the standards, it is mentioned in detail here: http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105
Take this fiddle as reference: http://jsfiddle.net/Blackhole/h7tb9/3/
The upper div has mouse-events bound to it directly. The lower div has mouse-event bound to its parent. Pick up the lower one. Move the mouse slowly at one edge and watch the console to see what happens.
You touch the edge and mouseover and mouseenter are fired in quick succession (hover).
As a result the inner div translates.
Do nothing. No event is fired and so nothing happens.
Move the mouse inside the outer div. mousemove fires and the inner div is still translated.
Slowly move the mouse out. mouseout and mouseleave are fired in quick succession and the inner div translates back to its original position.
This is described here: http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#events-mouseevents under the section Mouse Event Order.
Step 3 above is important. Because you are doing nothing, no event is fired and hence nothing happens. If the inner div were to bounce back to its original position in this step, then it would mean that an activation happened without any event!
This is in line with the definition of event as the document in this section: http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#glossary-event says:
An event is the representation of some occurrence (such as a mouse
click on the presentation of an element, the removal of child node
from an element, or any number of other possibilities) which is
associated with its event target. Each event is an instantiation of
one specific event type.
Now have a look at the document here: http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#event-flow, just before the section 3.2 starts, it says:
After an event completes all the phases of its propagation path, its
Event.currentTarget must be set to null and the Event.eventPhase must
be set to 0 (NONE). All other attributes of the Event (or interface
derived from Event) are unchanged (including the Event.target
attribute, which must continue to reference the event target).
The last line (in parentheses) is important. The event.target continues to reference the event target even after the event completes.
Now pick the upper div in the fiddle for reference. On mouseenter the div itself is translated. It does not matter if it moves away from below the mouse pointer. The event.target is still referencing to it and if no other mouse event occurs, nothing happens and it remains translated. The moment you move your mouse (anywhere in or out), the activation occurs on the event.target (which is still this div) and now the user-agent finds that the mouse pointer is no longer over the element and immediately mouseout and mouseleave events fire (after firing mousemove of course) causing the div to translate back.
Part 2 of your question:
2.What are the solutions to avoid this problem?
Edit : To give you a context, here is what I want to do concretely:
with JavaScript, I display a tooltip when the mouse is on an element
(and hide it when the mouse leaves it). But the same element can be
transform-ed when the user click on it. If the user simply clicks
without moving the mouse, the tooltip will remain displayed, which is
a real problem. How can I detect that the element is gone?
If you look at the implementation in the lower div in this fiddle: http://jsfiddle.net/abhitalks/h7tb9/2/ ; as compared to the upper div, there is no flutter/jitter when mousing over. This is because rather than the div itself, the events are being handled on the parent.
So, that could be one solution for your use case.
See this demo: http://jsfiddle.net/Blackhole/nR8t9/9/
This addresses your edit. Tooltip gets displayed on mouseover. Tooltip gets hidden on mouseleave. The same element can be transform-ed when you click. If you simply click without moving the mouse, the tooltip hides.
Here, if you click, the element is being translated and then no further hover action would happen. The tooltip itself is implemented using a :before pseudo-element. This separates out the tooltip and the element which you want to change after click. You still handle events on the element itself. No need for timeout as it is handled by the css itself. If you mouseout, the tooltip will hide after a delay.
Hope that helps.
It's a solution to use JavaScript and a class to indicate the status. In your case, you could use mouseover event to toggle a class like this:
$('#content').on('mouseover', function() {
$(this).toggleClass('down');
});
CSS
#content.down {
background-color: deepskyblue;
transform:translateY(300px);
-webkit-transform: translateY(300px);
}
jsFiddle
The other solution is to use a wrapper as hover block
<div id="container">
<div id="wrapper">
<div id="content">Hover me !</div>
</div>
</div>
CSS
#wrapper:hover #content {
background-color: deepskyblue;
transform:translateY(300px);
-webkit-transform: translateY(300px);
}
jsFiddle
Notice, this two solutions have different behaviors for different requirements.
My suggestion is to look at this problem another way: if an element is going to be transitioned when you click on it. Why not just execute your callback on click instead of mouseleave?
I am assuming the tooltip has some connection to the element you mouseenter, in which case mouseleave and click are effectively the same - they both cause mouse pointer to not be over the element anymore (regardless of how browser behaves).
PS: note that in your example, how mouseenter and mouseleave fire also depends on whether you set the transition as default property or as a :hover state property, since this looks like an area where browser vendors are free to optimize as they please, you should probably avoid they in the first place.
http://jsfiddle.net/U44Zf/13/ - transition on #content:hover
http://jsfiddle.net/U44Zf/14/ - transition on #content
This behavior is normal to prevent the element from bouncing under the cursor. Imagine the transition would revert as soon as the element is away from the cursor. As soon as the cursor has left the element, it would go back, so the cursor is again above the element and it moves down. This way it would bounce up and down at the edge of the cursor.
One solution would be to implement the transition with JavaScript instead of CSS, then the element will "bounce". But is this really the desired behavior? What exactly are you trying to do?
This behavior is normal and can not be changed. It is correctly implemented according to the specification #Stasik linked to.
If you have to change this behavior, you could use javascript with jquery instead of css pseudo classes. I created a jsfiddle to demonstrate a possible approach using the .ismouseover() jQuery extension by #Ivan Castellanos provided here.
Check if this is the behaviour you want to accomplish. Some are example styles, adjust as you please.
http://jsfiddle.net/U44Zf/9/
.tooltip {
background-color: white;
border: 1px solid black;
padding: 10px;
opacity: 0;
transition: 1s 500ms;
transition-property: transform, opacity;
position: absolute;
right: 0;
top: 0;
}
#content:hover .tooltip {
display: block;
opacity: 1;
transform:translateX(100px);
-webkit-transform: translateX(100px);
}
#content {
transition: 1s 500ms;
transition-property: background-color, color;
cursor: pointer;
position: relative;
}
#content.active {
background-color: blue;
color: white;
}
#content.active .tooltip {
opacity: 0;
transform: none;
-webkit-transform: none;
}
I've added this javascript snippet to control the click state
$('#content').click(function () {
$(this).toggleClass('active');
});
I have this demo
However the mouse over when dragged to left or right stops the toogle.
The hover() event didn't solve the problem.
Any idea ?
div.fileinputs {
position: relative;
display: none;
}
#show {
width: 200px;
height: 40px;
background-color: red;
z-index: -2px;
position: absolute;
}
<div id="show"></div>
<div class="fileinputs">Visible Panel Div</div>
$('#show').mouseover(function() {
$('.fileinputs').toggle();
});
Given that you want to simply show the element on mouseover and then hide it on mouseout, you should also use mouseout() to define the desired behavior you want when the mouse is removed:
$("#show")
.mouseover(function(){
$(".fileinputs").toggle();
})
.mouseout(function(){
$(".fileinputs").toggle();
});
Example. (It's choppy because fileinputs is a separate element, and it's not counting hovering over that as hovering over the show div).
But you should use hover, just to make it easier:
$("#show").hover(function(){
$(".fileinputs").show();
}, function(){
$(".fileinputs").hide();
});
Example. (Choppy for the same reason as above).
Since your desired behavior is definite, we'll just use show() for when the mouse is over it and hide() when it is removed.
By the way, it is preferred that you bind events using delegate() (for older versions of jQuery) or on() (for jQuery 1.7+):
$(document).on("mouseover mouseout", "#show", function(){
$(".fileinputs").toggle();
});
Example.
Though, you really should just use CSS for this. You can place fileinputs inside of show and use a child selector:
#show:hover > .fileinputs {
display: block;
}
Example. This one doesn't flicker because the element is inside the one that's getting the hover declarations attached to it, and CSS considers it as though you are still hovering over the parent element (because you technically are, as the target of the hover is within the boundaries of the parent [it would still work if it was outside the boundaries because the element is still nested]).
I think it's because you set your z-index on show to be -2. Once the fileInputs div is visible, it becomes on top of show, and as a result, mouseover for show no longer responds.
If you notice, if you hover from left to right over the red show div, but just below where the text is, the fileinputs div does in fact toggle.
If you add a border around the fileinputs div, the cause of the behavior will be clearer.
See: http://jsfiddle.net/pS9L8/
Moving your cursor over the region where the two divs overlap triggers a mouseover event, showing the hidden fileinputs div. Since that div is now displayed on top of show, your cursor is no longer directly over the original show div. You then continue to move your cursor, and as it moves outside the fileinputs region, that move is seen as another entrance to the underlying show div. Which again triggers the .toggle(), re-hiding the fileinputs div.
One quick fix is to switch to the jQuery custom event mouseEnter instead of mouseover (although you may get some jerky artifacts as jQuery reasons about the meaning of "over"). Depending on what you're trying to achieve, another option would be to reorder the two divs by z-index.