下拉框无法收回的解决方法：focus-outside使用方式

在开发过程中遇到过这样一种情况，当select下拉面板展开后，此时如果点击iframe或富文本编辑器的输入框，select的下拉面板没有收回，这是因为在iframe或富文本编辑器的点击没有触发select下拉面板的outside点击事件，所以需要通过focus-outside插件来解决。官方npm网站：https://github.com/txs1992/focus-outside/blob/master/docs/zh-cn.md#readme

安装：npm install focus-outside -S

在需要使用的页面中这样引入：

// import { bind, unbidn } from 'focus-outside'
// 建议使用下面这种别名，防止和你的函数命名冲突了。
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')// 绑定函数
focusBind(btnOne, callbackOne, 'button-group')
focusBind(btnTwo, callbackTwo, 'button-group')
focusBind(btnThree, callbackThree, 'custom-button')
focusBind(clearBtn, clearCallback)function callbackOne () {console.log('如果你点击的是 btnOne 与 btnTwo 将不会触发这个函数')
}function callbackTwo () {console.log('如果触发了，说明你点击了 btnOne 与 btnTwo 之外的元素')
}function callbackThree () {console.log('你点击了 btn-three 之外的区域')
}function clearCallback() {console.log('清除所有按钮的绑定函数')focusUnbind(btnOne)focusUnbind(btnTwo)focusUnbind(btnThree)focusUnbind(clearBtn)
}

绑定函数（bind）需要接收三个参数，第一个参数是要绑定的元素，可以使用上面的document.querySelector方法，也可以使用如

this.$refs.dropdown.$el 的方式

第二个参数是回调函数，即如果在绑定元素外触发点击事件，将调用什么方法（一般在这个回调函数中写入收回下拉框的方法）；

第三个参数是个key值，点击相同key值的元素，不会触发另一个元素的回调方法；

解绑函数（unbind）接收一个参数，即要解绑的元素，解绑后，focus-outside失效。

有使用问题，请留言。

下拉框无法收回的解决方法：focus-outside使用方式相关推荐

PLSQL无法连接64位Oracle数据库/Database下拉框为空的解决方法
PLSQL无法连接64位Oracle数据库/Database下拉框为空的解决方法参考文章: (1)PLSQL无法连接64位Oracle数据库/Database下拉框为空的解决方法 (2)https: ...
html下拉框变长,改变HTML下拉框SELECT选项的多种方法
原标题:改变HTML下拉框SELECT选项的多种方法提交表单后返回的HTML页面重新渲染,SELECT控件的value和selectedIndex属性都无法使下拉框保留提交表单前的状态. 复制代码 ...
elementui下拉框清空_巧妙解决element-ui下拉框选项过多的问题
1. 场景描述不知道你有没有这样的经历,下拉框的选项很多,上万个选项甚至更多,这个时候如果全部把数据放到下拉框中渲染出来,浏览器会卡死,体验会特别不好用人会说element-ui的select有一 ...
下拉框的高度html,设置select下拉框高度的一种方法
这种方法可以设置下拉框最多显示几条栏目,多余的栏目用显示滚动条展示: 文学集哲学雅思大学网奥数大学网奥数文学集哲学雅思大学网奥数 Layui:设置select下拉框自动选中某项 1.问题 ...
jqgrid的动态下拉框实现，并解决不能获取值的问题
使用jqgrid,要实现在单元格中的动态下拉框,废话不多说,上代码: var gridOption = $("#inLineItemEditList").jqGrid({url: ...
微信小程序搜索下拉框排名原理及使用方法「干货」
自从2017年1月份微信推出小程序以来,小程序的火热程度大家是有目共睹的,从一开始的精确搜索,到后面的模糊搜索,小程序的更新速度远远超过了外界的期待!虽然小程序目前已经有五十几个入口,但是关键词搜索这 ...
[JavaScript]搜索框中文/英文/拼音匹配过滤逻辑/input的focus和下拉框的click冲突解决/点击条目后focus二次点击不生效问题解决
效果图思路: 输入框的逻辑: 要监控input的输入,根据框架自己选择绑定事件要有focus和blur的方法,input的focus和下拉框的click冲突的话应该用mousedown 展开下拉框 ...
html中关于下拉框的2中设置方法（移入显示下拉框）
第一种方式(设置高度的不同来实现) 首先我们设置一个盒子来装我们的下拉框和内容 <div class="box1">小米 <div class="xia ...
store下拉框同步_ExtJS下拉列表使用方法（异步传输数据）
最近使用ExtJS下拉列表框(ComboBox)希望完成一个动态下拉列表的功能,即列表中的数据都通过异步方式查询数据库而来,同时在用户选择了列表中的某个值后,可以从后台正确的获取用户选择项所对应的值. ...

下拉框无法收回的解决方法：focus-outside使用方式

下拉框无法收回的解决方法：focus-outside使用方式相关推荐

最新文章

热门文章