Vue html组件中常用鼠标 触屏事件

最新推荐文章于 2024-04-28 20:46:32 发布
最新推荐文章于 2024-04-28 20:46:32 发布
阅读量1.6k 收藏
点赞数 1
文章标签： vue.js html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46258925/article/details/123562969
版权

1.鼠标事件


1. @mouseleave:鼠标离开组件会触发事件，不会冒泡
2. @mouseout:鼠标离开组件或者子组件会触发事件，会冒泡

3. @mouseenter:鼠标进入组件时触发事件，不会冒泡
4. @mouseover:鼠标进如组件时出发事件，会冒泡


区别:

mouseleave把组件当成整体，离开这个整体才会触发，离开子组件不触发(不冒泡)

mouseout即使是离开组件的子组件也会触发(冒泡)

mouseenter 与 mouseover 区别同上(进入)

2.触摸事件(移动端)


@touchstart: 触摸到时触发事件
@touchmove:  按住屏幕并且移动时触发
@touchend: 手指离开屏幕时触发
写bug给别人改
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Vue】vue移动端实现触摸事件（v-touch）的使用
weixin_62374100的博客
08-07 684
安装 npm install vue-touch@next -S main.js引入 1、import VueTouch from 'vue-touch' 2、Vue.use(VueTouch, {name: 'v-touch'}) // 组件内 <template> <v-touch v-on:swipeup="swiperup" v-on:swipedown="sw...
解决大屏、移动端中 vue的touchStart事件及click、mouseup事件冲突问题
liuxiaocaie的博客
02-21 3040
解决大屏、移动端中 vue的touchStart事件及click、mouseup事件冲突问题
OpenHarmony实战开发-使用通用事件、键鼠事件
最新发布
2401_82546228的博客
04-28 710
键鼠事件指键盘，鼠标外接设备的输入事件。
vue h5页面 解决touchstart，touchmove，touchend，click事件触发产生的问题
maoyuanh的博客
02-15 4074
我的思路是，触发touchstart方法的时候延迟200毫秒如果是就是触摸事件，否则在touchend里面判断就是点击十点，调用点击事件的方法即可。当你的需要即要求可以完成触摸事件，又要求有点击事件的时候，我们要搞清楚一个问题，事件触发的排序问题。
【VUE 监听用户滑动】
前端-CV全粘工程师
08-10 3356
可以使用Vue的自定义指令来实现监听滑动方向与距离。});// 横向滑动// 右滑} else {// 左滑} else {// 纵向滑动// 下滑} else {// 上滑})})然后，在需要监听滑动事件的元素上使用v-swipe指令，并传入一个函数作为参数，该函数接收两个参数，分别为滑动方向和距离。console . log(` 滑动方向： ${ direction } ，滑动距离： ${ distance } `);
Vue入门（十一）之移动端事件
qq_38256266的博客
08-18 3138
vueX补充及移动端事件1、vueX补充2、postman3、移动端事件3.1、click事件（单击事件）3.2、touch类事件（触摸事件）3.3、touch的优先级高于click3.4、阻止click事件的触发3.5、点透3.6、第三方的移动端事件库4、下拉刷新上拉加载（Better-scroll） 1、vueX补充 mapState, mapGetters, mapActions, mapMutations 昨天我们讲到vueX的基本使用，当一个组件需要获取多个状态的时候，代码会有些重复和冗余。 这时
在vue中实现禁止屏幕滚动,禁止屏幕滑动
10-15
首先，禁止屏幕滚动的基本思路是通过监听并阻止触摸移动事件（`touchmove`）和鼠标滚轮事件（`mousewheel`）的默认行为。在Vue中，我们可以直接在组件的模板中绑定这些事件，并使用`.prevent`修饰符来阻止默认事件的...
vue3-touch-events:对vue.js 3的简单触摸事件支持
05-12
所有事件均以相同的语法支持台式机（鼠标）和移动设备（触摸屏） 使用v-touch-class指令在悬停时自动添加样式并点击 在一个DOM元素上绑定多个触摸事件 使用类似于本机的事件处理程序的可自定义事件 节流的drag和...
vue滑块组件
08-14
3. **事件监听**：滑块组件需要监听用户的鼠标或触摸事件，当滑动时触发相应的事件处理函数，如`@input`、`@change`等。 4. **计算属性与方法**：Vue组件可以通过计算属性来处理复杂的逻辑，比如计算当前滑块的...
基于Vue.js的可拖拽树组件
05-07
- Vue.js社区中有多个成熟的树形组件库，如`element-ui`的Tree组件，`vuetify`的Treeview，以及本案例中的拖拽树组件。 3. **拖拽功能** - 拖拽功能是通过HTML5的`drag and drop` API实现的，该API允许用户通过...
vue项目纯css图片预览组件
11-03
Vue组件具有声明式的数据绑定、生命周期钩子和自定义事件等特性，使得组件的创建和维护更加简便。 7. **JavaScript支持**： 虽然这个组件主要依赖CSS实现视觉效果，但JavaScript仍必不可少，用于处理用户交互和...
vue实现移动端触屏拖拽功能
10-14
主要介绍了vue实现移动端触屏拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue自定义移动端touch事件之点击、滑动、长按事件
12-09
用法： **HTML** <div id="app" class="box" v-tap="vuetouch" //vuetouch为函数名，如没有参数，可直接写函数名 v-longtap="{fn:vuetouch,name:'长按'}" //如果有参数以对象形式传，fn 为函数名 v-swipeleft="{fn:vuetouch,name:'左滑'}" v-swiperight="{fn:vuetouch,name:'右滑'}" v-swipeup="{fn:vuetouch,name:'上滑'}" v-swipedown="{fn:vuetouch,name:
vue-touch-events:支持简单的触摸事件（点击滑动触摸保持）
04-28
提示触摸事件 启用vue.js 2.x的点击/滑动/触摸保持事件 特征： 常见的触摸事件，例如tap ， swipe ， touchhold （） 所有事件同时支持鼠标和触摸屏 使用touchClass选项和v-touch-class指令优化了触摸效果 在一个DOM元素上绑定多个触摸事件 可自定义的事件（可能带有本机事件） 允许通过v-touch-options指令拆分不同DOM元素的配置 可以自定义指令名称以避免名称空间冲突 这仅适用于vue.js 2.x 安装 要使用npm或yarn进行安装，请使用 npm i -S vue2-touch-events // or yarn add vue2-touch-events 用法 import Vue from 'vue' import Vue2TouchEvents from 'vue2-touch-events' Vue . us
vue自定义移动端touch事件，点击、滑动、长按事件
热门推荐
金大光
09-27 8万+
vue移动的自定义touch事件，包括点击，滑动，左滑，右滑，上滑，下滑，长按
vue移动端touch事件
qq719756146的博客
02-26 4714
开始事件是 @touchstart; 移动事件是 @touchmove; 结束事件是 @touchend;
手机端html5触屏事件(touch事件)
weixin_30639719的博客
09-30 1048
touchstart：触摸开始的时候触发 touchmove：手指在屏幕上滑动的时候触发 touchend：触摸结束的时候触发 而每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）： touches：当前位于屏幕上的所有手指的列表。 targetTouches：位于当前DOM元素上手指的列表。 changedTouches：涉及当前事件手指的列表。...
vue在移动端点击，滑动，长按的事件判断
骑着代码去流浪
06-24 6599
思路： 1）调用js的touch的API接口分别监听touchstart,touchmove,touchend事件 2）使用计时器可以设定时间用于区分长按和点击 <template> <div class="about"> <p @touchstart="start" @touchmove="move" @touchend="end"> ...
vue 触摸禁用事件
qq_42310995的博客
06-21 3149
<div class="ctype_dialog" @touchmove.prevent>
vue拖拽组件生成页面
05-13
然后，需要在Vue组件中实例化这个库，并设置好所需的参数，例如是否将数据保存到本地存储中。接下来，需要定义一个基本的页面布局，并通过拖拽组件库来添加元素。通过拖动这些元素，可以轻松组织页面布局，并实现所...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值