click-anywhere

中文

Install

1npm install click-anywhere

Usage

The library also provides vue2/3 directives vue2.7/3 components and react component for selection.

VanillaJS/Native JS

1<div id="app">This is app</div>
2
3<div class="ignore">This is ignore area</div>
4
5<script type="module">
6import { createHandler, removed } from 'click-anywhere'
7
8const el = document.getElementById('app')
9
10createHandler(console.log, {
11  once: true,
12  ignores: ['ignore'],
13  disabled: false
14})
15
16// remove handler
17removed(el)
18</script>

Vue Component

TIP: Currently, only vue3 vue2.7 and react are supported. vue2.6 and below are not supported.

1<template>
2  <click-anywhere @trigger="clickAnywhere">Click anywhere</click-anywhere>
3</template>
4
5<script setup>
6import ClickAnywhere from 'click-anywhere/dist/vue'
7</script>

React Component

1import ClickAnywhere from 'click-anywhere/dist/react'
2
3function App () {
4  return (
5    <ClickAnywhere
6      once
7      ignores={['ignore']}
8      disabled={false}
9      trigger={console.log}
10    >
11      Click anywhere
12    </ClickAnywhere>
13  )
14}

Directive

The directive are common to vue2/vue3.

1<template>
2  <div v-click-anywhere="clickAnywhere">Click anywhere</div>
3
4  <!--
5    This directive has an optional modifier once.
6    See below for a full explanation, It has a lower priority than options.once
7  -->
8  <div v-click-anywhere.once="clickAnywhere">Click anywhere</div>
9</template>
10
11<script setup>
12import vClickAnywhere from 'click-anywhere/dist/directive'
13
14function clickAnywhere () {
15  console.log('click anywhere')
16}
17
18// use options
19const directiveHandler = [
20  console.log,
21  {
22    // The event registered by this directive is executed only once
23    once: true,
24    // Element whitelist, the event registered by this directive will not be
25    // triggered when the event is triggered on the element in the whitelist
26    ignores: []
27  }
28]
29</script>

Attributes

Attribute	Description	Type	Default
once	The event registered by this component is executed only once	Boolean	false
ignores	Element whitelist, the event registered by this component will not be triggered when the event is triggered on the element in the whitelist	string[]	[]
disabled	Whether to disable the event registered by this component(Events are not executed until disabled becomes false)	Boolean	false

Events

Event	Description	Parameters
trigger	Triggered when the event is triggered	PointerEvent