https://github.com/txs1992/focus-outside
📦 一个很棒的 clickOutside 库，它解决了 iframe 无法触发 clickOutside 的问题，并且它支持分组绑定处理。A good clickOutside library, which solves the problem that iframe cannot trigger clickOutside, and it supports grouping binding processing.
https://github.com/txs1992/focus-outside
click click-away click-outside clickaway clickoutside clickoutside-library focus-away focus-outside focusaway focusoutside iframe iframe-click iframe-click-outside iframe-clickoutside solver trigger-clickoutside
Last synced: about 1 month ago
JSON representation
📦 一个很棒的 clickOutside 库，它解决了 iframe 无法触发 clickOutside 的问题，并且它支持分组绑定处理。A good clickOutside library, which solves the problem that iframe cannot trigger clickOutside, and it supports grouping binding processing.
- Host: GitHub
- URL: https://github.com/txs1992/focus-outside
- Owner: txs1992
- License: mit
- Created: 2017-11-17T08:00:45.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T08:40:48.000Z (about 3 years ago)
- Last Synced: 2025-10-24T16:39:48.394Z (4 months ago)
- Topics: click, click-away, click-outside, clickaway, clickoutside, clickoutside-library, focus-away, focus-outside, focusaway, focusoutside, iframe, iframe-click, iframe-click-outside, iframe-clickoutside, solver, trigger-clickoutside
- Language: TypeScript
- Homepage:
- Size: 2.76 MB
- Stars: 93
- Watchers: 2
- Forks: 12
- Open Issues: 21
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
focus-outside
## what is this
> A good clickOutside library, which solves the problem that iframe cannot trigger clickOutside, and it supports grouping binding processing.
## API
| function | descrption | options |
|:--------:|:--------:|:--------:|
| `bind ` | Bind outside handlers to elements | `el`, `callback`, `key`, `className`, for details, see the `Bind Params` table below |
| `unbind` | Clear element binding function | `el` Element Node |
## Bind Params
| parameter | type | descrption | required | default |
|:--------:|:--------:|:--------:|:--------:|:--------:|
| `el` | Element | Element to be bound | true | - |
| `callback` | Function | The processing function when the outside event is triggered | true | - |
| `key` | String/Function | Divide elements or functions into a group of types. When the same group of elements is clicked, the outside event will not be triggered, while clicking on elements outside the same group will trigger the outside event. | false |`callback` function |
| `className` | String | The class name to bind to the element | false | "focus-outside" |
## Notice
When the element is bound, `focus-outside` sets the element as a focusable element, which will give it a highlight style when it gets the focus browser. If you don't want to see this style, you only need to put this element The CSS property outline is set to none. The bind function of the focsout-outside version 0.5.0 adds a className parameter, adding a class name for each bound element. The default class name is `focus-outside`, and the class name is removed from the element when the unbind function is executed.
```js
// js
const elm = document.querySelector('#focus-ele')
// default classname is focus-outside
focusBind(elm, callback, 'key', 'my-focus-name')
// css
// If you need to override all the default styles, you can put this code in the global CSS.
.my-focus-name {
outline: none;
}
```
## Use FocusOutside
#### Simple Example
```js
// import { bind, unbidn } from 'focus-outside'
// It is recommended to use the following alias to prevent conflicts with your function naming.
import { bind: focusBind, unbind: focusUnbind } from 'focus-outside'
// If you are using a CDN, you should use it like this.
//
// const { bind: focusBind, unbind: focusUnbind } = FocusOutside
const elm = document.querySelector('#dorpdown-button')
// bind function
focusBind(elm, callback)
function callback () {
console.log('You clicked on the area outside the dropdown button.')
// clear bind
focusUnbind(elm)
}
```
[View Online Example](https://jsfiddle.net/_MT_/z0dejc23/9/)
#### Use of key
```js
import { bind: focusBind, unbind: focusUnbind } from 'focus-outside'
const btnOne = document.querySelector('#button-one')
const btnTwo = document.querySelector('#button-two')
const btnThree = document.querySelector('#button-three')
const clearBtn = document.querySelector('#button-clear')
// Binding function and key
focusBind(btnOne, callbackOne, 'button-group')
focusBind(btnTwo, callbackTwo, 'button-group')
focusBind(btnThree, callbackThree, 'custom-button')
focusBind(clearBtn, clearCallback)
function callbackOne () {
console.log('if you click on btnOne and btnTwo will not trigger this function')
}
function callbackTwo () {
console.log('if I was triggered, it means you clicked on elements other than btnOne and btnTwo')
}
function callbackThree () {
console.log('you clicked outside the btn-three')
}
function clearCallback() {
console.log('Clear all button binding functions')
focusUnbind(btnOne)
focusUnbind(btnTwo)
focusUnbind(btnThree)
focusUnbind(clearBtn)
}
```
#### Used in Vue
```js
// outside.js
export default {
bind (el, binding) {
focusBind(el, binding.value)
},
unbind (el, binding) {
focusUnbind(el)
}
}
// xx.vue
import outside from './outside.js'
export default {
directives: { outside },
methods: {
handleOutside () {
// Do something...
}
}
}
```
[View Online Example](https://jsfiddle.net/_MT_/57Lmbpe9/)
#### Used in Element
```js
dropdown menu
Oyster
Gold cake
Lion head
Snail powder
Double skin milk
import { bind: focusBind, unbind: focusUnbind } from 'focus-outside'
export default {
mounted () {
focusBind(this.$refs.dropdown.$el, this.$refs.dropdown.hide)
focusBind(this.$refs.dropdownContent.$el, this.$refs.dropdown.hide)
},
destoryed () {
focusUnbind(this.$refs.dropdown.$el)
focusUnbind(this.$refs.dropdownContent.$el)
}
}
```
[View Online Example](https://jsfiddle.net/_MT_/1wb8nk67/57/)
#### Used in Ant Design
```js
import { Menu, Dropdown, Icon, Button } from 'antd'
import { bind: focusBind, unbind: focusUnbind } from 'focus-outside'
function getItems () {
return [1,2,3,4].map(item => {
return {item} st menu item
})
}
class MyMenu extends React.Component {
constructor (props) {
super(props)
this.menuElm = null
}
render () {
return ({getItems()})
}
componentDidMount () {
this.menuElm = ReactDOM.findDOMNode(this.refs.menu)
if (this.menuElm && this.props.outside) focusBind(this.menuElm, this.props.outside)
}
componentWillUnmount () {
if (this.menuElm && this.props.outside) focusUnbind(this.menuElm)
}
}
class MyDropdown extends React.Component {
constructor (props) {
super(props)
this.dropdownElm = null
}
state = {
visible: false
}
render () {
const menu = ()
return (
Button
)
}
componentDidMount () {
this.dropdownElm = ReactDOM.findDOMNode(this.refs.divRef)
if (this.dropdownElm) focusBind(this.dropdownElm, this.handleOutside)
}
componentWillUnmount () {
if (this.dropdownElm) focusUnbind(this.dropdownElm)
}
handleOutside = () => {
this.setState({ visible: false })
}
handleClick = () => {
this.setState({ visible: !this.state.visible })
}
}
ReactDOM.render(
,
document.getElementById('container')
)
```
[View Online Example](https://codepen.io/taoxusheng/pen/KeRyXL?editors=1010)
## Build a development environment
```shell
1. Fork project, then clone to local.
git clone git@github.com:txs1992/focus-outside.git
2. Installation dependencies (make sure your computer has Node.js installed)
yarn install
3. run the project
yarn dev
```
## License
MIT