vue事件监听
HTML 所监听的事件我们的vue都已经加入了监听[HTML 事件参考手册]
·
HTML 所监听的事件我们的vue都已经加入了监听
HTML 事件参考手册
下面我们来介绍几个比较常用的事件
1、onclick 元素上发生鼠标点击时触发。 ==> vue用法 @click()
2、onscroll 当元素滚动条被滚动时运行的脚本。 ==> vue用法 @scroll()
可以用来监听元素是否滚动到底,如下:
<div @scroll.passive="getScroll($event)"></div>
getScroll(event) {
let scrollBottom = event.target.scrollHeight - event.target.scrollTop -event.target.clientHeight;
if (scrollBottom == 0 ) {
//去加载更多
}
}
3、ondblclick 元素上发生鼠标双击时触发。 ==> vue用法 @dblclick()
4、onmousedown 当元素上按下鼠标按钮时触发。。 ==> vue用法 @mousedown()
下面是一个元素拖动的例子:
<div class="box">
<div class="boc" ref="item" @mousedown="dragx($event)"></div>
</div>
dragx(el) {
let oDiv = this.$refs.item; //当前元素
let disX = el.clientX - oDiv.offsetLeft;
let disY = el.clientY - oDiv.offsetTop;
document.onmousemove = function (e) {
console.log(e)
//通过事件委托,计算移动的距离
let l = e.clientX - disX;
let t = e.clientY - disY;
//移动当前元素
oDiv.style.left = l + "px";
oDiv.style.top = t + "px";
//将此时的位置传出去
};
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
};
},
.box{
position: relative;
}
.boc{
width: 150px;
height: 150px;
background-color: #fccccf;
position: absolute;
}
5、onkeydown 在用户按下按键时触发。 ==> vue用法 @keydown()
6、onkeypress 在用户敲击按钮时触发。 ==> vue用法 @keypress()
7、onkeyup 当用户释放按键时触发。 ==> vue用法 @keyup()
具体可以参考文档HTML 事件参考手册
###针对我们的手机H5,提供了手指触摸等事件
事件 | 描述 |
---|---|
touchstart | 当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。 |
touchmove | 当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。 |
touchend | 当手指从屏幕上离开的时候触发。 |
跟踪触摸的属性
属性 | 描述 |
---|---|
touches | 表示当前跟踪的触摸操作的touch对象的数组。 |
targetTouches | 特定于事件目标的Touch对象的数组。 |
changeTouches | 表示自上次触摸以来发生了什么改变的Touch对象的数组。 |
每个Touch对象包含的属性如下。 | |
属性 | 描述 |
:----: | :----: |
clientX | 触摸目标在视口中的x坐标。 |
clientY | 触摸目标在视口中的y坐标。 |
identifier | 标识触摸的唯一ID。 |
pageX | 触摸目标在页面中的x坐标。 |
pageY | 触摸目标在页面中的y坐标。 |
screenX | 触摸目标在屏幕中的x坐标。 |
screenY | 触摸目标在屏幕中的y坐标。 |
target | 触目的DOM节点目标。 |
更多推荐
已为社区贡献1条内容
所有评论(0)