I have an unordered list where each li is a fixed small size but when you hover over it, it will expand to full size. This is done via ng-mouseover and ng-mouseout. The problem is that some of the li text contains other markup ( for example) and when the mouse enters the tag, it triggers a mouseout event and collapses the li.
Obviously the desired behavior is to have the li remain enlarged while the mouse is inside it, even if it's over a child element. Does anyone have an idea on how to basically ignore the mouseover of an inner element? I would also need to ignore the mouseout of the li if it were going into a child element.
There are two choices:
Use CSS pointer-events on your inner elements (but first check how well it is supported in your target browsers).
Use ngMouseenter/ngMouseleave instead (See this plnkr for different behavior between mouseenter/mouseleave vs. mouseover/mouseout)
Related
I'm using Highmaps to show a simple map and over it I have another div with a component that draws things on top of the map (this has to be done this way, I cannot draw everything inside Highmaps, unfortunely).
Now I would like to have some interation with the map, although it is below my div. I would like to know if there is a way to trigger the click, hover, etc. events on the map when I click on the div on top of it.
I have searched Highmaps docs trying to find a method a-like trigger(ev, x, y) but there seems to be none. Then I tried a pure javascript solution using MouseEvent() and dispatchEvent() on the Map DOM, but it also didn't work.
I have set up a simple fiddle with what I want to work: http://jsfiddle.net/k11yfz58/1/
If we coment the #overlay div, we get an alert when we click in a state. I want the same behavior but clicking on the overlay div, is that possible?
Thanks!
EDIT
It was suggested to use the pointer-events CSS property for this. That does not solve my problem because I also need the events to be triggered on the #overlay div.
You can add this to your css:
#overlay {
pointer-events: none;
}
From MDN:
The pointer-events CSS property specifies under what circumstances (if any) a particular graphic element can become the target of mouse events.
and the none value:
none
The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.
What this means is that your overlay element is "invisible" to mouse events, and thus mouse events occur on the div below.
Here's a simple jsFiddle:
http://jsfiddle.net/cEDj6/
I have one span element that I bound mouseover to. When I move the mouse horizontally across different lines of text, mouseover happens only once. However, when I move between lines of text within the same span element, mouseover happens multiple times.
Is this expected?
Is there a standard way of preventing this (short of adding logic to consider the last visited element)?
Using Chromium, version 28.0.1500.71 Ubuntu 13.04 (28.0.1500.71-0ubuntu1.13.04.1).
This seems to stem from an inline elemnt <span> with multiple lines of text. In reality space between each line is not contained in element as far as mouse is concerned.
This can be seen by putting background color on element. Changing it to block elemnt in css with display:block alleviates the problem, or by using other native block elements other than span
Background demo
If you make it a div instead of a span it works as expected
This is odd usage of a span. Since the semantic element is a <p> tag, use that. This also will correct your issue.
Funny enough, it's because the span is an inline element and it's wrapping. Because a span is an inline item, and it's wrapping, you get individual lines, and there is space between the lines. I never picked up on this before, but, because you have a mouseout event, it makes it more obvious. To demonstrate this, check out this update on your fiddle.
Fiddle: http://jsfiddle.net/LSRvn/
The reason a DIV doesn't do this is because the DIV is a block element containing the items.
I'm trying to attach click events to a couple of divs. One of which has no height or width, just borders. Maybe it's just the browser, but the clicks are being triggered very unreliably. Even the css parameters .class:hover{} isn't really working.
$("body").on("click", "._tlh_dropdown, ._tlh_dropdown *", function (event) {
isn't working when the a div contained by ._tlh_dropdown is clicked. And the div ._tlh_dropdown_close_button is not removing it's parent div when clicked, nor turning a darker shade of gray when it is hovered over. What am I doing wrong here? I assume it has to do with the click event not being applied to the areas of the divs that are "just padding". Is this the case? How can I overcome this?
http://jsfiddle.net/UrNUM/7/
This is happening because the underline element that is a div element overlaps the elements in question . As you know div is a block level element.
One work around is to to set the 2 divs to inline-block
._tlh_dropdown_input_container, ._tlh_dropdown{
display: inline-block;
}
Check Fiddle for hover
If you want the div to be block level as it is then you can also play around with the z-index
._tlh_dropdown_close_button{
z-index: 1;
}
This will make sure the close div is always on top of the underlying container
UPDATE
2 events fire for every click event on the page..
So the content is not shown when u click on the image because of this condition
if ($targ.hasClass('_tlh_dropdown')
|| $targ.closest('._tlh_dropdown_content').length)
return;
This happens because the e.target when you click on the arrow image will be the arrow and not the tlh_dropdown .. So it fails on this condition and moves to the next statement where the content is removed.
Change it
if ($targ.hasClass('_tlh_dropdown')
|| $targ.closest('._tlh_dropdown').length
|| $targ.closest('._tlh_dropdown_content').length)
return;
It should work..
Check Fiddle
Also I feel the same can be accomplished with a lot less code. You can always have the HTML already built and then hide or show based on the condition.
Regarding the close button, if you hover "_tlh_dropdown_input_container" in the inspector, you can see that it overlaps the bottom part of the X button. That's why the hover/click event on the X is not caught below the middle of it.
Regarding the down arrow, just wrap it with another DIV on which you'll add the events. You can achieve minimal HTML by using a single DIV and adding the arrow to it using CSS :before or :after.
In JavaScript, is it possible to obtain a list of all elements that an element is hovering over? I'm using an element as a cursor, and I want the other elements in the page to be underlined when the cursor element is hovering over each of the other elements.
<div id="cursor">|----------|<br/>|----------|<br/>>I'm a spaceship!><br/>|----------|<br/>|----------|<br/></div>
<div id="hi">Try to select this text</div>
<p>I want to automatically highlight all elements that the cursor element hovers over.</p>
<p>Here's an element.<p>
http://jsfiddle.net/fU3Qn/
The :hover pseudo-class applies to whatever you're cursor is over. Have a quick look at this fiddle where your mouse triggers a red background for each element hovered: http://goo.gl/zurP6
Secondly, if you are using an element as your cursor, you can instruct your mouse to pass through it by using the pointer-events: none rule. Note, support outside of SVG for this property is limited.
Other than this, the only alternative way is to use something like elementFromPoint, but this will return only a single element. I'm not sure this would even work for you since you're mouse is always obstructed by an element to begin with.
Regarding the elementFromPoint route, you could temporarily hide your custom cursor to get the next element below the mouse, and then turn your custom cursor back on, as suggested in the comments below.
I am trying to create a firebug type rollover element selector, but seem to be having problems with the rollover triggering parent elements that contain my target element.
See the following example:
http://jsbin.com/elofe3/edit
There are 3 divs on the page, all with mouseenter/mouseleave listeners, the largest is totally independent of theother two, the second largest is position ontop of the largest but is not contained within it, and the sallest is nested within the second largest, (it's parent). It may be easier to visualise if you look at the source.
If you click preview and roll you mouse over the central div, you will notice that the second largest div also continues to respond to the mouseenter event and remains outlined in red. To fix this, I tried to add $(this).parent().trigger("mouseout"); on each rollover listener.
http://jsbin.com/elofe3/4/edit
But them when your mouse leaves the smallest (pink) div, to the middle (black) div, the middle div does not fire (presumably because mouseenter/mouseover is not being fired as the mouse has never actually left the central div.
I understand that in this situation I could just add $(this).parent().trigger("mouseover"); to the mouseleave listener on each div, but it would'nt work in evey example, (for instance, a div nested within its parent, but is positioned outside of that parent on the page.)
I require some novel solution to this, it needs to work very similarly to the firebug, element selector (the tool that lets you rollover elements on the page (higlighting them) and click to select them and triggering it to show the source for that element).
Any help greatly appreciated.
This is how mouseenter and mouseleave work. But you are mislead, mouseenter is not triggered on the parent element. Instead, mouseleave is not triggered if you hover over descendants. So it is not that the border is added again, but that it is never removed.
Add the event handlers to mouseover and mouseout and prevent the event from bubbling up:
$("div").mouseover(function(e) {
e.stopPropagation();
$(this).css("outline", "solid 3px red");
});
$("div").mouseout(function(e) {
e.stopPropagation();
$(this).css("outline", "none");
});
http://jsbin.com/elofe3/5/edit