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节点目标。
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐