tristen / Hoverintent
Licence: mit
🐭 Fire mouse events when a user intends it
Stars: ✭ 274
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Hoverintent
creviceapp
Multi purpose utility which supports gestures with mouse and keyboard.
Stars: ✭ 22 (-91.97%)
Mutual labels: mouse
Sculpt-Comfort-Mission-Control
Switch desktops on your Mac with any mouse
Stars: ✭ 117 (-57.3%)
Mutual labels: mouse
NoMouseAllowed
🙅🐁 NoMouseAllowed discourages the use of the mouse on macOS
Stars: ✭ 25 (-90.88%)
Mutual labels: mouse
switch joy con as mouse for macos
Tool to use Nintendo Switch Joy-Con as a mouse for macOS
Stars: ✭ 19 (-93.07%)
Mutual labels: mouse
MouseInjectDetection
Simple method of checking whether or not mouse movement or buttons (<windows 10) are injected
Stars: ✭ 29 (-89.42%)
Mutual labels: mouse
werf
Mouse driven text editor inspired by Acme (text editor from Plan 9).
Stars: ✭ 20 (-92.7%)
Mutual labels: mouse
plain-overlay
The simple library for customizable overlay which covers a page, elements or iframe-windows.
Stars: ✭ 28 (-89.78%)
Mutual labels: mouse
react-native-pointer-interactions
Expose iPad mouse & trackpads interactions to React Native
Stars: ✭ 20 (-92.7%)
Mutual labels: mouse
input-remapper
🎮 An easy to use tool to change the mapping of your input device buttons.
Stars: ✭ 1,142 (+316.79%)
Mutual labels: mouse
YetAnotherKeyDisplayer
The application for displaying pressed keys of the keyboard
Stars: ✭ 88 (-67.88%)
Mutual labels: mouse
input-event
🎹 Read and parse input device(like mouse, keyboard, joystick and IR-Remote)'s event data.
Stars: ✭ 45 (-83.58%)
Mutual labels: mouse
React Event Components
🛰 A set of React components designed to handle global events (interval, keyboard, touch, mouse, etc)
Stars: ✭ 271 (-1.09%)
Mutual labels: mouse
Pancake
Lightweight, Fast, Easy-to-use HTML5 2D game framework!
Stars: ✭ 79 (-71.17%)
Mutual labels: mouse
LowLevelInput.Net
A thread safe and event driven LowLevelMouse and LowLevelKeyboard Hook
Stars: ✭ 32 (-88.32%)
Mutual labels: mouse
hoverintent
hoverintent is a reworking of Brian Cherne's jQuery plugin in plain javascript. It has no dependencies.
It's goal is to determine a user's intention when hovering over an element by triggering a mouseover event when the cursor position has slowed down enough.
Check out the demo to see how it works in action.
Browser Support
All ✔ | All ✔ | 9+ ✔ | 7+ ✔ | All ✔ |
Basic usage
Adding hoverintent to an element
<script src='hoverintent.min.js'></script>
<script>
var el = document.getElementById('element-id');
hoverintent(el,
function() {
// Handler in
}, function() {
// Handler out
});
</script>
Removing hoverintent from an element
<script src='hoverintent.min.js'></script>
<script>
var el = document.getElementById('element-id');
// Save a reference to the method
var hoverListener = hoverintent(el,
function() {
// Handler in
}, function() {
// Handler out
});
// Remove hoverintent listeners
hoverListener.remove();
</script>
Custom options
You can adjust mouse sensitivity or the length of time a mouse over/out event is fired:
<script src='hoverintent.min.js'></script>
<script>
var opts = {
timeout: 500,
interval: 50
};
var el = document.getElementById('element-id');
hoverintent(el,
function() {
// Handler in
}, function() {
// Handler out
}).options(opts);
</script>
Setting | Default Value | Description |
---|---|---|
sensitivity | sensitivity: 7 |
The value (in pixels) the mouse cursor should not travel beyond while hoverintent waits to trigger the mouseover event. |
interval | interval: 100 |
The length of time (in milliseconds) hoverintent waits to re-read mouse coordinates. |
timeout | timeout: 0 |
The length of time (in milliseconds) before the mouseout event is fired. |
handleFocus | timeout: false |
Adds onOver/onOut callbacks to keyboard navigation during blur and focus events |
Ender support
Add hoverintent
as an internal chain method to your Ender compilation.
// ender add hoverintent
$('.element').hoverintent(function() {
// Handler in
}, function() {
// Handler out
});
Building
to manage dependencies and build. Development requires you have node.js installed.
- Install node.js. 'Install' will download a package for your OS.
- Run
npm install
- Run
npm run build
Licence
_____
< MIT >
-----
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
Bugs?
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].