
1、新建html文档,在body标签中添加一个div标签,为div标签设置一个id,这里以“demo”为例:
2、在head标签中引入jquery的js文件,这时可以使用cdn链接:
3、添加script标签,在script标签中绑定“demo”,然后使用click函数为div标签绑定点击事件:
遇到一个需求,要给一个 div 添加 blur 事件,具体情况是: el-seclect 不满足项目下拉列表的需求,找了一些插件,也没发现比较好用的,所以就决定自己用 div 实现效果,也就遇到了当鼠标点击其他空白处时, div 要隐藏起来的问题
刚开始毫无思路,查了查资料,发现还真的可以
1. 直接给 div 加 blur 事件
不生效,然后发现是 div 不能直接加 blur 事件
2.用 tabindex
差不多就是这种: https://blog.csdn.net/u013112461/article/details/90747257 ,效果很奇怪,不符合需求
最后想到了,用 vue 去监听所有的点击事件,从里面筛选出来这个 div ,除了点击这个 div ,其他地方全部隐藏
错误写法:
这个想法没问题,但是运行之后,控制台报错
Uncaught TypeError: this.$refs.boxRef.contains is not a function at HTMLDocument.eval ,就很烦,然后查了好久,终于找到一篇相关博客,原因就是 用js原生获取dom的方法代替ref方式
修改之后:
到这里就成功的实现了 div 的 blur 效果,学废了学废了!
贴上大佬博客: https://www.freesion.com/article/33241074504/
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)