Let's imagine I have an event handler function attached to an image, for example, an onmouseover
handler. I don't want this handler run if an onmouseover
event is fired by a particular element.
To be more specific, I have an image which being hovered, a menu is popped out. I want to close that menu if the mouse moves out of that image, unless I move the mouse to the menu, which is adjacent to the image.
So something like this in pseudo code:
img.mouseout = function () {
if (otherelement.onmouseover.fired) {
leave the menu as it is
}
else
{
close the menu
}
So how can I check whether another event was fired?
I would add a timeout and a mouseover handler that clears it in the other handler. While the elements could be exactly next to each other visually, adding a small timer is more safe since there might just be a tiny 1px area where the mouseout event fires, causing an ugly flickering.
This also allows a quick mouseshake without flicker.
Something like:
var timer;
img.onmouseout = other.onmouseout = function() {
timer = setTimeout(closemenu, 100);
}
img.onmouseover = other.onmouseover = function() {
clearTimeout(timer);
}
function closemenu() {
// close it
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.