Vue监听键盘鼠标事件
1 前言1.1 业务场景vue页面监听键盘鼠标等事件。官方给的例子是在input标签中的,我们想要的效果是不使用固定标签。2 实现原理2.1 增加监听mounted () {window.addEventListener('keyup',this.handleKeyup)window.addEventListener('scroll',this.handleScroll)},这里定义了,键盘按出的
·
1 前言
1.1 业务场景
vue页面监听键盘鼠标等事件。
官方给的例子是在input
标签中的,我们想要的效果是不使用固定标签。
2 实现原理
2.1 增加监听
mounted () {
window.addEventListener('keyup',this.handleKeyup)
window.addEventListener('scroll',this.handleScroll)
},
这里定义了,键盘按出的时候的事件 和 鼠标滑轮滚动的事件。
这里可以自行查询下有哪些事件,
关键字:
HTML DOM Event
这里根据addEventListener(event,function)
的用法。
event
,必参,字符串,注意要把DOM事件的名称去掉on
2.2 方法调用
methods:{
// 键盘事件
handleKeyup(event){
const e = event || window.event || arguments.callee.caller.arguments[0]
if(!e) return
const {key,keyCode} = e
console.log(keyCode)
console.log(key)
},
// 滑轮事件
handleScroll(){
var e = document.body.scrollTop||document.documentElement.scrollTop
if(!e) return
console.log(e)
},
}
2.3 移除监控
destroyed () {
window.removeEventListener('keyup',this.handleKeyup)
window.removeEventListener('scroll',this.handleScroll)
},
更多推荐
已为社区贡献44条内容
所有评论(0)