https://github.com/ryuever/event-position-provider
To provide event info relative to specified HTMLElement.
https://github.com/ryuever/event-position-provider
click event-info-provider hover outside-element
Last synced: about 1 month ago
JSON representation
To provide event info relative to specified HTMLElement.
- Host: GitHub
- URL: https://github.com/ryuever/event-position-provider
- Owner: ryuever
- Created: 2018-01-18T08:08:31.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-22T09:42:22.000Z (over 8 years ago)
- Last Synced: 2025-08-09T05:50:31.000Z (10 months ago)
- Topics: click, event-info-provider, hover, outside-element
- Language: JavaScript
- Homepage:
- Size: 35.2 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Event Position Provider
To provide event info relative to specified HTMLElement.
## usage
```js
import EventPositionProvider from 'event-position-provider';
this.epp = new EventPositionProvider({
entryNodes: [
this.target,
this.listNode,
],
})
```
## API
### `EventPositionProvider`
- entryClasses(Array | String) : The watched node which will matched with.
- entryNodes(Array): Nodes will watch.
- watchEvent(Array | ['click', 'hover'], default: ['click']): Events it will watch.
### `click` event
On default, this lib watch `click` event related to watched nodes; For these condition it will emit three different `stat.eventType`
- `willFire`: It will be triggered on the first time click watch entries.
- `willDismiss`: It will be triggered on the first time click outside the watch entries.
- `onPersistence`: It will be triggered on the second or more times click watch entries.
```js
this.epp.on('click', (stat) => {
const { event, eventType } = stat;
if (eventType === 'willDismiss') {
// ...
}
if (eventType === 'willFire') {
// ...
}
})
```
### `hover` event
On default, this lib watch `hover` event related to watched nodes; For these condition it will emit three different `stat.eventType`
- `willEnter`: It will be triggered on `mouseover` the watched entries.
- `willLeave`: It will be triggered on `mouseleave` the watched entries.
- `onMoving`: It will be triggered on mouse moving on the watched entries.
```js
this.epp.on('hover', (stat) => {
const { event, eventType } = stat;
if (eventType === 'willEnter') {
// ...
}
if (eventType === 'willLeave') {
// ...
}
})
```