Determine User Intent Using Vanilla JavaScript – sv-hover-intent

Preview:

Description:

sv-hover-intent is the vanilla JS version of the hoverIntent jQuery plugin that tracks mouse events and determines whether the user intends to activate an element when hovering over.

Ideal for a hover-triggered dropdown menu that prevents the dropdown from opening when the mouse rolls over.

How to use it:

1. Load the sv-hover-intent javascript library in the document.

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

2. Attach the HoverIntent to your element (a dropdown menu for example) and trigger functions 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 wait before triggering the exit function. Default: 400.

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 tracking. Default: 100.

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 number of pixels between polling intervals, then the “over” function will be called. With the minimum sensitivity threshold of 1, the mouse must not move between polling intervals. With higher sensitivity thresholds you are more likely to receive a false positive. Default: 7.

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
});