I'm having problems with mousein and mouseout events triggering at unexpected times.
I am trying to use a GitHub svg icon and listen to when the mouse enters and leaves the icon. I'm not able to replicate it in Svelte's REPL though. In the REPL, the mouseout event will trigger once however moving my mouse through the element causes 4-5 mouseout in one pass. The mouseout is seemingly triggering when you leave the parent element and enter a child element so going from mousein on the <a> tag will trigger a mouseout when you enter the <svg> and <path> etc.
<a
href="https://github.com/blahblahblah"
target="_blank"
rel="noreferrer"
class="flex"
on:mouseenter={handleGithub}
on:mouseout={handleGithub}
on:blur={handleGithub}
>
<Icon type="github" />
{#if githubHover}
<p>GitHub</p>
{/if}
</a>
There are four mouse events related to this logic:
mouseenter
mouseover
mouseleave
mouseout
(There is no mousein.)
These bubble: mouseover & mouseout
These do not bubble: mouseenter & mouseleave
Bubbling events will trigger for all children in the hierarchy. If you do not want those events, use the non-bubbling versions. I.e. use mouseleave instead of mouseout.
Related
I have created a overlay and inside that overlay there's another div. I want to close the overlay when the user click on the overlay part and not do anything if the user clicks the child div. I have implemented the closing the overlay function.But the issue is it closes the overlay even if the user clicks on the child div. How can I fix this?
<div id="overlay" onClick={this.props.hideOverlay}>
<div className="ques_preview_div">
</div>
</div>
So basically the overlay should not close if the user clicks somewhere in this div.
<div className="ques_preview_div">
</div>
My previous answer did not work therefore I created a CodePen
function childClick(event){
event.stopPropagation()
console.log('child')
}
the problem is based on event bubbling of the child. So if the child is clicked although it does not have a onClick function it still bubbles upwards -> the parent onClick is called. To prevent this we have to add a onClick for the child and simply stopPropagation()
I Have div included in another parent div that are both allowed for "drop".
In the example a class named "red" is added to all droppable object in dragenter event. So if I enter the mouse durring drag in child element both child and parent will get "red" class.
When I abort the drag&drop or if I leave elements during operation, the dragleave event will remove the added "red" class.
The problem is when I drop the element into child there are two options :
Option 1 : event.stopPropagation() is included in drop event
The problem is that in this case, the parent won't execute the drop event and the "red" class will not be removed at all in parent.
Option 2: event.stopPropagation() is not included in drop event
The problem is that in this case the drop event will be executed for both child and parent element. But the drop action should be done only for child element.
I thought about a solution using stopPropagation() by running through event.path array for removing the added class but there are probably another ways to solve the problem.
Here the fiddler for option 1 with stopPropagation()
Here the fiddler for option 2 without stopPropagation()
Register a dragend event on the element that you are dragging. The dragend event is fired when you release the element that is being dragged. The event will be fired regardless of whether it was dropped in a dropzone or not. This way you can separate the drop event from the end of drag. You can filter your process using conditions.
I want to know the difference of dragover and dragenter events of HTML5 drag &drop.
I'm not clear about the difference.
The dragenter event happens at the moment you drag something in to the target element, and then it stops.
The dragover event happens during the time you are dragging something until you drop it.
Look here:
$('.dropzone').on("dragover", function (event) {
console.log('dragover');
});
$('.dropzone').on("dragenter", function (event) {
console.log('dragenter');
});
Now see the console:
As you can see the dragenter happen once (when you drag element in to the target).
But the dragover event happen every few hundred milliseconds.
The same difference exist between drag and dragstart, dragstart happen once but drag happen every few hundred milliseconds.
Based on the dragenter and dragover MDN doc...
dragover
The dragover event is fired when an element or text selection is being
dragged over a valid drop target (every few hundred milliseconds).
dragenter
The dragenter event is fired when a dragged element or text selection
enters a valid drop target.
The dragover is triggered after a small delay (every 350 ms, I think) while the cursor stays over the element.
dragenter:
dragenter event is fires only when while dragging an draggable element, the cursor enters the area of a DOM element which has the ondragenter event attached to it.
dragover:
On the other hand, dragover event is fired "constantly" while dragging a draggable element, and the cursor happens to be to be on the screen inside an DOM element's area, where this DOM element has the ondragover event attached to it.
The difference is that (while dragging) when the cursor enters a drop-zone, dragover is constantly fired (on mouse move) while
dragenter is only fired once, when the cursor has "entered"
DEMO:
function dragover(e) {
console.log("drag over")
}
function dragenter(e) {
console.log("drag enter!!!")
}
#target{
width: 200px;
height: 200px;
background: lightyellow;
border: 1px solid gold;
}
div[draggable]{
width: 60px;
height: 60px;
background: red;
}
<div draggable="true">Drag Me</div>
<div id="target" ondragover="dragover(event)" ondragenter="dragenter(event)">Drop Zone</div>
I have a gray div with a disabled checkbox in it.
http://jsfiddle.net/hFPTU/1/
I also have blue div that is positioned over the gray box, but below the checkbox.
A third div is updated with text when mouseenter and mouseleave events are triggered on the gray box. Mouse into gray box -> "ENTER". Mouse out of gray box -> "LEAVE"
Everything works just as expected, except for when you enter the gray box through the disabled checkbox.
Move mouse over blue box
Move mouse over checkbox
No Mouseenter event is triggered.
Why does this happen?
That checkbox exists in the blue box div having class 'a' .
When your mouse enter through that checkbox inside that blue box, mouseenter event is supposed to be fired at that time but since jquery does not support events on disabled elements so event is prevented.
Your code is working fine as expected well.
For more details, you can refer these links:
http://bugs.jquery.com/ticket/11382
Event on a disabled input
I'm trying to make my own button in flash application. Here is some code:
addEventListener(MouseEvent.MOUSE_OUT, Out);
addEventListener(MouseEvent.MOUSE_OVER, Over);
...
private function Over(event:MouseEvent):void
{
addChild(overImage);
}
private function Out(event:MouseEvent):void
{
removeChild(overImage);
}
When mouse is over this button, overImage is blinking. Looks like Over and Out are calling each frame. What am I doing wrong?
If the mouse is positioned in a point where overImage will appear, then that child object will cause a MOUSE_OVER event on itself and thus a MOUSE_OUT event on its parent. The parent MOUSE_OUT will remove the overImage from the display list and that wil cause again a MOUSE_OVER over the parent, startin the loop once again and making the overImage to blink.
Since you tagged this with Flex; why not use a Flex Button?
The MouseOver event will fire continuously as the mouse moves. I would perform a check before calling the addChild to see if the overImage is already parented:
private function Over(event:MouseEvent):void
{
if(!overImage.parent){
addChild(overImage);
}
}
private function Out(event:MouseEvent):void
{
if(overImage.parent){
removeChild(overImage);
}
}
I suspect that will prevent the "Blinking".
Like the other guy said use ROLL_OVER and ROLL_OUT instead, OR set the button.mouseChildren = false.
The reason it's blinking is because MOUSE_OVER and MOUSE_OUT will for every child of that button. So if you have text, or a bg image / color, or a shine, or other elements inside of it, every time you roll over ANY of those parts, it's firing.
So when you add "overImage", it appears below the mouse, and that fires another mouseOut and mouseOver. Again, just use ROLL_OVER and ROLL_OUT, OR set mouseChildren = false
Just consider using MouseEvent.ROLL_OVER and MouseEvent.ROLL_OUT events. They ignore component's children. Without any additional checks and ugly tricks.
And by the way, buttons support skins and states, so you can just include your image into 'over' state.