https://github.com/davidfig/clicked
Javascript: create click event for both mouse and touch
https://github.com/davidfig/clicked
Last synced: 24 days ago
JSON representation
Javascript: create click event for both mouse and touch
- Host: GitHub
- URL: https://github.com/davidfig/clicked
- Owner: davidfig
- License: mit
- Created: 2017-01-26T05:34:17.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T02:31:40.000Z (over 2 years ago)
- Last Synced: 2025-04-14T23:44:12.900Z (24 days ago)
- Language: TypeScript
- Homepage:
- Size: 1.18 MB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# clicked
Configurable vanilla handler for clicks, double-clicks, and/or long-clicks that works for both mouse and touch
## changes in version 4
* ported code to typescript
* added options.mouse to select which mouse buttons are active (if any)
* added options.touch to select whether touch is active and how many touch points are allowed
* removed rollup and compiled using tsc
* improved demo
## usage
```import { clicked } from 'clicked'```
or
```const clicked = require('clicked').clicked```
## demo
https://davidfig.github.io/clicked/
## rationale
I wanted to create a vanilla javascript way to handle mouse and touch clicks, double-clicks, and long-clicks.
## example
```js
import { clicked } from 'clicked'
function handleClick()
{
console.log('I was clicked.')
}
const div = document.getElementById('clickme')
const c = clicked(div, handleClick, { threshold: 15 })
// change callback
c.callback = () => console.log('different clicker')
// destroy
c.destroy()
// using built-in querySelector
clicked('#clickme', handleClick2)
// support for all types of clicks
function handleAllClicks(e) {
switch (e.type)
{
case 'clicked': ...
case 'double-clicked': ...
case 'long-clicked': ...
}
// view UIEvent that caused callback
console.log(e.event)
}
clicked('#clickme', handleAllClicks, { doubleClick: true, longClick: true })
```
## API
### clicked(element, callback, options) : Clicked
creates Clicked object for element
|name|type|default|description
|---|---|---|---|
|element|HTMLElement or string||element or querySelector entry (e.g., #id-name or .class-name)|
|callback|ClickedCallback||callback called after clicked
|[options]|object||optional options|
|[options].clicked|boolean|true|dispatch event for clicked
|[options].threshold|number|10|threshold of movement to cancel all events
|[options.mouse]|boolean or 'left' or 'right' 'middle' or 'left-right' or 'left-middle' or 'right-middle'|true|whether to listen for mouse events; can also be used to set which mouse buttons are active
|[options.touch]|boolean or number|1|whether to listen for touch events; can also be used to set the number of touch points to accept
|[options.doubleClick]|boolean|false|dispatch events for double click
|[options.doubleClickTime]]|number|500|wait time in millseconds for double click
|[options.longClick]]|boolean|false|enable watcher for long click
|[options.longClickTime]]|boolean|500|wait time for long click
|[options.clickDown]|boolean|dispatch event for click down (ie, after touchstart or mousedown callback will be called with type 'click-down')
|[options.capture]|boolean|false|events will be dispatched to this registered listener before being dispatched to any EventTarget beneath it in the DOM tree
### Clicked
returned by clicked(...)
### Clicked.destroy()
removes event listeners on element
### Clicked.callback (function): ClickedCallback
|name|type|description
|---|---|---|
|event|MouseEvent or TouchEvent|mouse or touch event that triggered callback|
|type|'clicked' or 'double-clicked' or 'long-clicked' or 'click-down'|type of click|
### Clicked.cancel()
cancel any outstanding events
## demo
```yarn demo```
Open browser to https://localhost:1234/
## license
MIT License
(c) 2020 [YOPEY YOPEY LLC](https://yopeyopey.com/) by [David Figatner](mailto://[email protected])