I am using JavaScript mouseover and mouseout events when I move my mouse very quickly the events are not triggered. Can you tell me what the problem is?
Please let me know how to solve this. Also let me know if anything else is needed.
Here is the code
HTML
4 => qq[
<ul id="primary">
<li id="firstTab" onmouseover="changeSecondaryMenu('index','explore');" onmouseout="changeSecondaryMenu('explore');"><a></a></li>
<li id="secondTab" onmouseover="changeSecondaryMenu('home','explore');" onmouseout="changeSecondaryMenu('explore');"><a></a></li>
<li id="thirdTab" onmouseover="changeSecondaryMenu('requests','explore');" onmouseout="changeSecondaryMenu('explore');"><a></a></li>
<li onmouseover="changeSecondaryMenu('explore','explore');"><a class="current" href="contact.pl">About Site</a></li>
</ul>
],
);
my $primary_menu = $primary_menu{$primary_index};
my %secondary_menu = (
1 => qq[
<ul id="secondary" onmouseover="cancelTimeOut();" onmouseout="resetTab(event);">
<li> <a>Summary</a> </li>
<li> <a>Updates</a> </li>
<li> <a>History</a> </li>
<li> <a>News/Stats</a> </li>
<li> <a>Gratitude & Good Life</a> </li>
</ul>
],
JavaScript
function cancelTimeOut(){
clearTimeout(timer);
}
function resetTab(evt){
var evt = evt || window.event; // event object
var target = evt.target || window.event.srcElement; // event target
var targetID = target.getAttribute("id");
if (targetID == "secondary") {
clearTimeout(timer);
if(currentTab !=null){
document.getElementById("secondary").innerHTML = tabs[currentTab];
Rounded("ul#secondary","tr","#FFFFFF","transparent","smooth");
}
}
}
function changeSecondaryMenu(tab,selectedTab) {
currentTab = selectedTab;
clearTimeout(timer);
document.getElementById("secondary").innerHTML = tabs[tab];
Rounded("ul#secondary","tr","#FFFFFF","transparent","smooth");
}
I am using JavaScript mouseover and mouseout events when I move my mouse very quickly the events are not triggered. Can you tell me what the problem is?
Please let me know how to solve this. Also let me know if anything else is needed.
Here is the code
HTML
4 => qq[
<ul id="primary">
<li id="firstTab" onmouseover="changeSecondaryMenu('index','explore');" onmouseout="changeSecondaryMenu('explore');"><a></a></li>
<li id="secondTab" onmouseover="changeSecondaryMenu('home','explore');" onmouseout="changeSecondaryMenu('explore');"><a></a></li>
<li id="thirdTab" onmouseover="changeSecondaryMenu('requests','explore');" onmouseout="changeSecondaryMenu('explore');"><a></a></li>
<li onmouseover="changeSecondaryMenu('explore','explore');"><a class="current" href="contact.pl">About Site</a></li>
</ul>
],
);
my $primary_menu = $primary_menu{$primary_index};
my %secondary_menu = (
1 => qq[
<ul id="secondary" onmouseover="cancelTimeOut();" onmouseout="resetTab(event);">
<li> <a>Summary</a> </li>
<li> <a>Updates</a> </li>
<li> <a>History</a> </li>
<li> <a>News/Stats</a> </li>
<li> <a>Gratitude & Good Life</a> </li>
</ul>
],
JavaScript
function cancelTimeOut(){
clearTimeout(timer);
}
function resetTab(evt){
var evt = evt || window.event; // event object
var target = evt.target || window.event.srcElement; // event target
var targetID = target.getAttribute("id");
if (targetID == "secondary") {
clearTimeout(timer);
if(currentTab !=null){
document.getElementById("secondary").innerHTML = tabs[currentTab];
Rounded("ul#secondary","tr","#FFFFFF","transparent","smooth");
}
}
}
function changeSecondaryMenu(tab,selectedTab) {
currentTab = selectedTab;
clearTimeout(timer);
document.getElementById("secondary").innerHTML = tabs[tab];
Rounded("ul#secondary","tr","#FFFFFF","transparent","smooth");
}
Share
Improve this question
edited Jun 10, 2014 at 15:19
Raidri
17.6k11 gold badges66 silver badges68 bronze badges
asked Apr 8, 2010 at 5:53
kirankiran
1491 gold badge2 silver badges6 bronze badges
4
- 1 Can you provide the code sample or a demo? – rahul Commented Apr 8, 2010 at 5:56
- I added the code to the original query – kiran Commented Apr 8, 2010 at 6:44
- stackoverflow./questions/7448468/… – jedierikb Commented Feb 28, 2017 at 22:19
- hi, may I know how you solved this issue? – yeln Commented Jan 22, 2022 at 18:03
1 Answer
Reset to default 7It depends. Javascript won't try to interpolate between "frames." Meaning, yes, if you move your mouse fast enough, one mousemove event will fire on one side of your object, and the next mousemove will fire on the other side, so mouseover and out never get fired and you're none the wiser.
If it is absolutely critical that you capture these events, you're going to have to do a little bit of work yourself. You can hook into mousemove yourself, and for each event fire, pare the position of the mouse during the last fire, and the current fire. You'll need to do a little geometry here, but if the line created by the two points hits the bounding box of the object in question (either 4 pares based on each of the sides, or 2 pares based on an X through the box), then manually fire mouseover. And then mouseout.