Discontinuing mouseover function until specified time has passed

Question

Discontinuing mouseover function until specified time has passed

In order to display a div when someone hovers over a text box for a second, without showing it if the mouse just quickly passes over the text box, the following JavaScript code can be used:

<input type="text" value="Fred" onmouseover="overit()">
<div id="dv" style="display:none">Jim</div>

var delay;
function overit()
{
delay = window.setTimeout('showme();', 1000);
}
function showme()
{
document.getElementById('dv').style.display = 'block';
}

If the gap between the mouseover and mouseout events is less than a second, the showme() function should not be called. To achieve this behavior without using jQuery, the provided solution can be implemented.

For a demonstration of this functionality, refer to the fiddle at http://jsfiddle.net/S4jx4/

Note that jQuery is not being utilized in this particular case.

javascript

Answer 1

Answer №1

Your suggested approach is getting close to a working solution. To improve it, consider incorporating an onmouseout event listener on the input element to stop the timeout.

<input type="text" value="Jenny" onmouseover="hoverFunction()" onmouseout="clearTimer();">

http://jsfiddle.net/YQ847/

Answer 2

Your suggested approach is getting close to a working solution. To improve it, consider incorporating an onmouseout event listener on the input element to stop the timeout.

<input type="text" value="Jenny" onmouseover="hoverFunction()" onmouseout="clearTimer();">

http://jsfiddle.net/YQ847/

Answer 3

Answer №2

When you are certain that the function will be executed after 1 second, there is no need to verify the time gap. Instead, focus on canceling the timeout when the mouseleave event occurs. Even if the function has already been called within the one-second timeframe, cancelling it will not have any adverse effects.

var delay;
function overit()
{
    delay = window.setTimeout('showme();', 1000);
}
function showme()
{
    document.getElementById('dv').style.display = 'block';
}
function leaveit() {
    window.clearTimeout(delay);   
}

<input type="text" value="Fred" onmouseenter="overit()" onmouseleave="leaveit()">
<div id="dv" style="display:none">Jim</div>

http://jsfiddle.net/hXE28/

Answer 4

When you are certain that the function will be executed after 1 second, there is no need to verify the time gap. Instead, focus on canceling the timeout when the mouseleave event occurs. Even if the function has already been called within the one-second timeframe, cancelling it will not have any adverse effects.

var delay;
function overit()
{
    delay = window.setTimeout('showme();', 1000);
}
function showme()
{
    document.getElementById('dv').style.display = 'block';
}
function leaveit() {
    window.clearTimeout(delay);   
}

<input type="text" value="Fred" onmouseenter="overit()" onmouseleave="leaveit()">
<div id="dv" style="display:none">Jim</div>

http://jsfiddle.net/hXE28/

Answer 5

Answer №3

Eliminate the inline JavaScript

<input type="text" value="Sara" id="txt" />
<div id="dv" style="display:none">Mia</div>

and implement event listeners

var input = document.getElementById('txt'),
    text  = document.getElementById('dv'),
    timer;

input.addEventListener('mouseenter', function() {
    timer = setTimeout(showText, 1000);
}, false);

input.addEventListener('mouseleave', function() {
    clearTimeout(timer);
}, false);

function showText() {
    text.style.display = 'block';
}

FIDDLE

Answer 6

Eliminate the inline JavaScript

<input type="text" value="Sara" id="txt" />
<div id="dv" style="display:none">Mia</div>

and implement event listeners

var input = document.getElementById('txt'),
    text  = document.getElementById('dv'),
    timer;

input.addEventListener('mouseenter', function() {
    timer = setTimeout(showText, 1000);
}, false);

input.addEventListener('mouseleave', function() {
    clearTimeout(timer);
}, false);

function showText() {
    text.style.display = 'block';
}

FIDDLE

Discontinuing mouseover function until specified time has passed

Answer №1

Answer №2

Answer №3

Similar questions

Refresh the custom JavaScript dropdown list without having to reload the page

Unable to locate the JavaScript files within the NextJs and ReactJs project

The system encountered an issue while trying to access the 'bannable' property, as it was undefined

Using Next.js API routes instead of relying on Axios for making API calls is a great

The React getTime() method does not properly update the state

Trigger the original function again once the other function completes in jQuery AJAX

Why is $scope.$watch('$destroy') being called in Angular UI Router 1.0 even when not leaving the state?

JavaScript reference to a function

Setting up React Router in a nested directory with a flexible route structure

Generate an HTML dropdown menu based on the item selected from the autocomplete input field

Combining JavaScript functions and Vue.js methods through chaining

Methods for establishing state within a React Native render function

What is the best way to change a byte array into an image using JavaScript?

Component fails to re-render after token refresh on subsequent requests

Guide to dynamically swapping one SVG icon with another SVG icon using AngularJS

Receiving an error when trying to access the 'get' property of $http within a nested function

What is the reason behind the failure of next/script with Google reCAPTCHA?

Updating HighCharts with fresh data through Ajax

Is there a way to utilize JSON data to dynamically fill column names in a JQuery datatable?

I require assistance in obtaining the float value for the CSS property of 'font-size'