事件和拖动滚动条和键盘事件"/>
滚轮事件和拖动滚动条和键盘事件
一、鼠标的滚轮事件
触发: 鼠标的滚轮上下滑动的时候触发
代码:
// 监听
// DOMMouseScroll:火狐
// onmousewheel:其他浏览器
if(window.addEventListener){window.addEventListener('DOMMouseScroll',wheel,false)
}
window.onmousewheel = document['onmousewheel'] = wheel
function wheel(event){console.log(event,'滚轮事件')
}// vue事件
// 一般浏览器
@mousewheel=wheel($event)
// firefox浏览器
@DOMMouseScroll=wheel($event)
二、onscroll事件
触发: 鼠标滚轮滚动或者鼠标拖动滚动条
条件: body不能设置height值
1:
window.onscroll=function(){let t = document.documentElement.scrollTop || document.body.scrollTopconsole.log(t)
}
2:监听
window.addEventListener('scroll',function(){console.log('触发了')
})
3:onscroll事件—为标签添加onscroll事件
触发: 鼠标滚轮或者鼠标拖动滚动条
条件: 这个标签必须得有height值
$('#idname').scroll(function{console.log('触发了')
})
四、键盘事件
jianPan () {// 添加unbind先进行了解绑是为了不重复被调用$(document).unbind("keydown").keydown((event) =>{if(event.keyCode === 46){console.log("按下了delete键盘")}})$(document).unbind("keyup").keyup((event) =>{if(event.keyCode === 46) {console.log("松开了delete键盘")}})}键盘事件js写法
window.addEventListener(‘keydown’,function(e){
if(e.key===’s’ && e.ctrlKey){
e.preventDefault()
}
})
博客借鉴: .html
更多推荐
滚轮事件和拖动滚动条和键盘事件
发布评论