Do something when someone is probably going to click something.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__
dist
src
.babelrc
.gitignore
.travis.yml
LICENSE
README.md
package-lock.json
package.json
probaclick-example.gif
sandbox.html
serve.js
webpack.config.js

README.md

ProbaClick

Do something when someone's probably going to click something.

Build Status

ProbaClick Example

Overview

ProbaClick fires a callback when a user hovers over an element for a specified length of time or, if specified, after a user hovers over a link a certain number of times. It's designed under the assumption that when a user spends a certain amount of time hovering over an item, it's likely that they're about click or interact with it in some way. By anticipating that click, you're able to perform an action before the user actually does it.

Use Cases

The use cases are wide, but perhaps the most common is to dynamically fetch resources when it's likely that a user will click on a link. For example, you might dynamically prefetch a page that a user is probably going to navigate to next.

Usage

To use, pass a NodeList, Node, or string selector, and define your options.

//-- Turn each button red when it's hovered over for a second.
ProbaClick(document.querySelectorAll('button'), {
    callback: function (element) {
        element.style.background = 'red';
    }, 
    delay: 1000
});

Trigger by Hover Duration or Hover Count

By default, ProbaClick will fire its callback method after a certain amount of total time hovered. For example, if delay is set to 1000, the callback will fire after a user hovers twice at 500ms each, once at 1000ms, or any other number of hovers whose durations add up to at least 1000ms.

However, it's also possible to trigger the callback based on the total number of hovers, regardless of the amount of time spent hovering. The following configuration will fire the callback after a total hover time of 1000ms OR when the user has hovered over the element 3 times.

ProbaClick(document.querySelectorAll('button'), {
    callback: function (element) {}, 
    delay: 1000,
    count: 3
});

After the callback has fired, the total hover time and hover count will be reset to zero.

Arguments

Elements

Any of the following are valid:

ProbaClick(document.querySelectorAll('a.class')) // ...
ProbaClick(document.querySelector('a.class')) // ... 
ProbaClick('a.class') // ...

Options

Option Description Default
callback The function that will fire after the delay is met. function(){}
delay The amount of milliseconds to wait before firing the callback. 500
count The number of individual hovers to allow before fireing the callback. null
max The maximum number of times the callback will fire after repeatedly hovering over it. Not specifying this value will allow the callback to fire over and over with no limit as a user meets the hover threshold. After the max has been met, event listeners will be removed. false