\n\n## what is this\n\n> A library that solves the problem that iframe element cannot trigger clickOutside.\n\n## API\n\n| function | descrption | options |\n|:--------:|:--------:|:--------:|\n| `bind ` | Bind outside handlers to elements | `el`, `callback`, `key`, `className`, for details, see the `Bind Params` table below |\n| `unbind` | Clear element binding function | `el` Element Node |\n\n\n## Bind Params\n| parameter | type | descrption | required | default |\n|:--------:|:--------:|:--------:|:--------:|:--------:|\n| `el` | Element | Element to be bound | true | - |\n| `callback` | Function | The processing function when the outside event is triggered | true | - |\n| `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 |\n| `className` | String | The class name to bind to the element | false | \"focus-outside\" |\n\n\n## Notice\n\nWhen 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.\n\n```js\n\n\n// js\nconst elm = document.querySelector('#focus-ele')\n// default classname is focus-outside\nfocusBind(elm, callback, 'key', 'my-focus-name')\n\n// css\n// If you need to override all the default styles, you can put this code in the global CSS.\n.my-focus-name {\n outline: none;\n}\n```\n\n## Use FocusOutside\n\n#### Simple Example\n\n```js\n// import { bind, unbidn } from 'focus-outside'\n// It is recommended to use the following alias to prevent conflicts with your function naming.\nimport { bind: focusBind, unbind: focusUnbind } from 'focus-outside'\n\n// If you are using a CDN, you should use it like this.\n// \n// const { bind: focusBind, unbind: focusUnbind } = FocusOutside\n\nconst elm = document.querySelector('#dorpdown-button')\n// bind function\nfocusBind(elm, callback)\n\nfunction callback () {\n console.log('You clicked on the area outside the dropdown button.')\n // clear bind\n focusUnbind(elm)\n}\n```\n\n[View Online Example](https://jsfiddle.net/_MT_/z0dejc23/9/)\n\n#### Use of key\n\n```js\nimport { bind: focusBind, unbind: focusUnbind } from 'focus-outside'\n\nconst btnOne = document.querySelector('#button-one')\nconst btnTwo = document.querySelector('#button-two')\nconst btnThree = document.querySelector('#button-three')\nconst clearBtn = document.querySelector('#button-clear')\n\n// Binding function and key\nfocusBind(btnOne, callbackOne, 'button-group')\nfocusBind(btnTwo, callbackTwo, 'button-group')\nfocusBind(btnThree, callbackThree, 'custom-button')\nfocusBind(clearBtn, clearCallback)\n\nfunction callbackOne () {\n console.log('if you click on btnOne and btnTwo will not trigger this function')\n}\n\nfunction callbackTwo () {\n console.log('if I was triggered, it means you clicked on elements other than btnOne and btnTwo')\n}\n\nfunction callbackThree () {\n console.log('you clicked outside the btn-three')\n}\n\nfunction clearCallback() {\n console.log('Clear all button binding functions')\n focusUnbind(btnOne)\n focusUnbind(btnTwo)\n focusUnbind(btnThree)\n focusUnbind(clearBtn)\n}\n```\n\n#### Used in Vue\n\n```js\n\n// outside.js\nexport default {\n bind (el, binding) {\n focusBind(el, binding.value)\n },\n\n unbind (el, binding) {\n focusUnbind(el)\n }\n}\n\n// xx.vue\n\n \n\n\nimport outside from './outside.js'\n\nexport default {\n directives: { outside },\n\n methods: {\n handleOutside () {\n // Do something...\n }\n }\n}\n```\n\n[View Online Example](https://jsfiddle.net/_MT_/57Lmbpe9/)\n\n#### Used in Element\n\n```js\n\n \n dropdown menu\n \n \n Oyster\n Gold cake\n Lion head\n Snail powder\n Double skin milk\n \n\n\nimport { bind: focusBind, unbind: focusUnbind } from 'focus-outside'\n\nexport default {\n mounted () {\n focusBind(this.$refs.dropdown.$el, this.$refs.dropdown.hide)\n focusBind(this.$refs.dropdownContent.$el, this.$refs.dropdown.hide)\n },\n\n destoryed () {\n focusUnbind(this.$refs.dropdown.$el)\n focusUnbind(this.$refs.dropdownContent.$el)\n }\n}\n```\n\n[View Online Example](https://jsfiddle.net/_MT_/1wb8nk67/57/)\n\n#### Used in Ant Design\n\n```js\nimport { Menu, Dropdown, Icon, Button } from 'antd'\nimport { bind: focusBind, unbind: focusUnbind } from 'focus-outside'\n\nfunction getItems () {\n return [1,2,3,4].map(item => {\n return {item} st menu item \n })\n}\n\nclass MyMenu extends React.Component {\n constructor (props) {\n super(props)\n this.menuElm = null\n }\n\n render () {\n return ()\n }\n\n componentDidMount () {\n this.menuElm = ReactDOM.findDOMNode(this.refs.menu)\n if (this.menuElm && this.props.outside) focusBind(this.menuElm, this.props.outside)\n }\n\n componentWillUnmount () {\n if (this.menuElm && this.props.outside) focusUnbind(this.menuElm)\n }\n}\n\nclass MyDropdown extends React.Component {\n\n constructor (props) {\n super(props)\n this.dropdownElm = null\n }\n\n state = {\n visible: false\n }\n\n render () {\n const menu = ()\n return (\n \n \n \n )\n }\n\n componentDidMount () {\n this.dropdownElm = ReactDOM.findDOMNode(this.refs.divRef)\n if (this.dropdownElm) focusBind(this.dropdownElm, this.handleOutside)\n }\n\n componentWillUnmount () {\n if (this.dropdownElm) focusUnbind(this.dropdownElm)\n }\n\n handleOutside = () => {\n this.setState({ visible: false })\n }\n\n handleClick = () => {\n this.setState({ visible: !this.state.visible })\n }\n}\n\nReactDOM.render(\n ,\n document.getElementById('container')\n)\n```\n\n[View Online Example](https://codepen.io/taoxusheng/pen/KeRyXL?editors=1010)\n\n## Build a development environment\n\n```shell\n1. Fork project, then clone to local.\ngit clone git@github.com:txs1992/focus-outside.git\n\n2. Installation dependencies (make sure your computer has Node.js installed)\nyarn install\n\n3. run the project\nyarn dev\n```\n\n## License\n\nMIT","users":{}}
![](\"http://img.shields.io/travis/txs1992/focus-outside.svg\")
\n \n \n ![](\"https://img.shields.io/npm/dt/focus-outside.svg\")
\n \n \n ![](\"https://img.shields.io/npm/dm/focus-outside.svg\")
\n \n \n ![](\"https://img.shields.io/npm/v/focus-outside.svg\")
\n \n \n ![](\"https://img.shields.io/npm/l/focus-outside.svg\")
\n \n \n ![](\"https://img.shields.io/node/v/passport.svg\")
\n \n