# clicked

> Configurable vanilla handler for clicks, double-clicks, and/or long-clicks that works with both mouse and touch

Latest version **4.0.3** (published 2020-08-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install clicked
pnpm add clicked
yarn add clicked
bun add clicked
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.3 |
| Published | 2020-08-16 |
| First published | 2017-01-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 59 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | David Figatner |
| Maintainers | davidfig |
| Keywords | javascript, mouse, touch, double click, long click, click |

## Links

- npm: https://www.npmjs.com/package/clicked
- Repository: https://github.com/davidfig/clicked
- Homepage: https://github.com/davidfig/clicked#readme
- Issues: https://github.com/davidfig/clicked/issues
- npm.io page: https://npm.io/package/clicked

## Recent versions

- 4.0.3 (latest) — 2020-08-16
- 4.0.2 — 2020-06-01
- 4.0.1 — 2020-05-31
- 4.0.0 — 2020-05-31
- 3.2.3 — 2020-05-18
- 3.2.2 — 2020-05-09
- 3.2.1 — 2020-05-04
- 3.2.0 — 2020-05-04
- 3.1.0 — 2020-01-09
- 3.0.0 — 2019-11-02
- 2.2.1 — 2019-04-24
- 2.2.0 — 2019-04-24
- 2.1.1 — 2019-03-18
- 2.1.0 — 2019-03-18
- 2.0.0 — 2018-04-18
- … 11 more at https://npm.io/package/clicked/versions

## 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://david@yopeyopey.com)

---
_Source: https://npm.io/package/clicked · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._