移动和网络前端开发的常见事件

最编程 2024-05-23 10:49:22

...

前言：最近一段事件在开发移动端web,遇到了事件比较多，这里搜集了一些资料，来解决困惑。

PC端

mouseleave：指点设备（通常是鼠标）的指针移出某个元素时，会触发 mouseleave 事件。

mouseenter：当定点设备（通常指鼠标）移动到元素上时就会触发 mouseenter 事件

mouseover：当指针设备移动到存在监听器的元素或其子元素的时候，mouseover 事件就会被触发。

mouseout：事件在当指针设备（通常是鼠标）移出了附加侦听器的元素或关闭了它的一个子元素时触发。

异同

	触发条件	是否冒泡
mouseenter	鼠标指针穿过被选元素	否
mouseover	鼠标指针穿过被选元素或其子元素、孙元素	是
mouseleave	鼠标指针穿过被选元素	否
mouseout	鼠标指针穿过被选元素或其子元素、孙元素	是

mouseout，mouseover,一般不用，表示鼠标针对子元素。

mouseleave、mouseenter最常用，表示鼠标对本身的事件。

不论鼠标指针穿过被选元素或其子元素、孙元素，都会触发mouseover事件

只有鼠标指针穿过被选元素时，才会触发mouseenter事件

执行顺序

mouseover>mouseenter>mouseout>mouseleave

demo

移动端

touchend，touchstart，touchmove事件

touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。　

touchend事件：当手指从屏幕上离开的时候触发。

touchmove事件：当手指在屏幕上滑动的时候连续地触发。　

demo

// 打开F12 切换到移动端开始摸你点触

主要代码

 <template>
   <div class="dialog" v-show="value">
     <div>
       <div class="goback" @click.prevent="$emit('input', false)">
         <i class="el-icon-close" />关闭
       </div>
       <div
         class="content"
         ref="content"
         @touchstart="touchStart"
         @touchend="touchEnd"
         @touchmove="touchMove"
         v-if="showid"
       >
         <TicketDetail :id="showid"></TicketDetail>
         <!-- 发票预览插件 -->
       </div>
       <div class="page">
         <span
           ><i
             class="el-icon-caret-left"
             title="上一页"
             @click="$emit('change', '-')"
           ></i
         ></span>
         {{ current + 1 }} / {{ total }}
         <span
           ><i
             class="el-icon-caret-right"
             title="下一页"
             @click="$emit('change', '+')"
           ></i
         ></span>
       </div>
     </div>
   </div>
 </template>
 
 <script>
 import TicketDetail from "./TicketDetail";
 export default {
   components: { TicketDetail },
   data() {
     return {
       direction: null, // 0 往下 1 往上 2向左 3向右
       move: {},
       moveX: 0,
     };
   },
   props: ["value", "showid", "current", "total"],
   watch: {},
   mounted() {},
   created() {},
   computed: {},
 
   methods: {
     // 触摸开始
     touchStart(e) {
       e.preventDefault();
       const touch = e.targetTouches[0];
       const startPos = {
         x: touch.pageX,
         y: touch.pageY,
       };
       this.move.startPos = startPos;
 
       console.log(startPos, "startPos✅");
     },
     // 触摸结束
     touchEnd(e) {
       e.preventDefault();
       this.$refs.content.style.transform = `translateX(${0}px)`;
       // 判断是上下滑动还是左右滑动
       const x = Math.abs(this.move.startPos.x - this.move.movePos.x);
       const y = Math.abs(this.move.startPos.y - this.move.movePos.y);
       //   如果步长小于20，不触发滑动事件
       if (x < 60 && y < 60) {
         return;
       }
       if (x > y) {
         if (this.move.startPos.x > this.move.movePos.x) {
           this.direction = "left"; // 向左
         } else {
           this.direction = "right"; // 向右
         }
       } else {
         if (this.move.startPos.y > this.move.movePos.y) {
           this.direction = "top"; // 往上
         } else {
           this.direction = "bottom"; // 往下
         }
       }
       const { direction } = this;
       if (direction === "left") {
         this.$emit("change", "-");
       } else if (direction === "right") {
         this.$emit("change", "+");
       }
       console.log(this.direction, "direction✅");
     },
     // 触摸移动
     touchMove(e) {
       e.preventDefault();
       const touch = e.changedTouches[0];
       const movePos = {
         x: touch.pageX,
         y: touch.pageY,
       };
       this.move.movePos = movePos;
       this.moveX = this.move.movePos.x - this.move.startPos.x;
       this.$refs.content.style.transform = `translateX(${this.moveX}px)`;
 
       //   console.log(movePos, "movePos✅");
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
 // .content  X轴偏移 20px
 
 .dialog {
   position: absolute;
   left: 0;
   top: 0;
   background-color: #fff;
   color: #26b2f3;
   z-index: 9999;
   height: 100vh;
   width: 100vw;
   overflow-y: auto;
   .goback {
     position: absolute;
     top: 10px;
     right: 10px;
     color: #26b2f3;
     font-size: 20px;
     cursor: pointer;
     z-index: 9999;
   }
   .page {
     font-size: 20px;
     font-weight: bold;
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     bottom: 10px;
     color: #26b2f3;
 
     display: flex;
     align-items: center;
 
     span {
       font-size: 40px;
     }
   }
 }
 </style>

上一篇：鼠标悬停、鼠标移出、鼠标进入和鼠标离开之间的区别

下一篇： 1.2 SVG MIME 类型 - [ svg中文手册 ] - 在线本地手册 - php中文网

移动和网络前端开发的常见事件

PC端

异同

执行顺序

移动端

主要代码

搞定Web前端开发：事件委托和代理的详细解析

移动和网络前端开发的常见事件

Vue在前端开发中的常见应用和技巧

从入门到精通：使用HTML5、CSS3和移动Web进行前端开发的笔记（第二部分）