Determine User Intent Using Vanilla JavaScript

sv-hover-intent is a JavaScript plug-in that handles mouse movements on delay. It tracks when the mouse movement is slow enough that the user likely intended to activate this item.

hoverintent, javascript code, use of javascript, what is javascript in html, javascript introduction

How to make use of it:

1. Load the sv-hover-intent javascript library within the doc.

<script src="sv-hover-intent.js"></script>

2. Attach the HoverIntent to your component (a dropdown menu for instance) and set off capabilities on mouseenter or mouseleave.

var dropDown = document.querySelectorAll('.dropDown');
var instance = new SV.HoverIntent(dropDown, {
    onEnter: function(targetItem) {
      // called on mouseenter with intent
    },
    onExit: function(targetItem) {
      // call on mouseleave after timeout
    },
});

3. Determine the time to attend earlier than triggering the exit function.

var dropDown = document.querySelectorAll('.dropDown');
var instance = new SV.HoverIntent(dropDown, {
    onEnter: function(targetItem) {
      // called on mouseenter with intent
    },
    onExit: function(targetItem) {
      // call on mouseleave after timeout
    },
    exitDelay: 500
});

4. Determine the polling interval for mouse monitoring.

var dropDown = document.querySelectorAll('.dropDown');
var instance = new SV.HoverIntent(dropDown, {
    onEnter: function(targetItem) {
      // called on mouseenter with intent
    },
    onExit: function(targetItem) {
      // call on mouseleave after timeout
    },
    interval: 200
});

5. If the mouse travels fewer than this variety of pixels between polling intervals, then the “over” function will likely be referred to as.

var dropDown = document.querySelectorAll('.dropDown');
var instance = new SV.HoverIntent(dropDown, {
    onEnter: function(targetItem) {
      // called on mouseenter with intent
    },
    onExit: function(targetItem) {
      // call on mouseleave after timeout
    },
    sensitivity: 7
});

Determine User Intent, sv-hover-intent Plugin/Github