一个事件一定时间内只允许点击执行一次 与 vue阻止滚动穿透

最新推荐文章于 2022-07-06 11:36:31 发布
最新推荐文章于 2022-07-06 11:36:31 发布
阅读量1.9k 收藏 2
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/DangerousBaymax/p/9116802.html
版权

可能我的方法很笨，简单实现来的就是给两个状态，一个状态点击时就发生改变，另外一个给一个定时器延迟改变

篮圈部分，给了两种状态，一个isDisable，一个comeTime

点击事件以后comeTime跟随事件直接改变状态，而isDisable则用setTimeout延迟两秒改变，这样就可以阻止连续点击事件触发器以后事件冒泡产生bug

关于vue阻止滚动穿透，相当简单，就在标签内加一串： @touchmove.prevent

精彩

转载于:https://www.cnblogs.com/DangerousBaymax/p/9116802.html

weixin_30925411
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2+Vue3（脚手架）
qq_47296476的博客
01-17 1582
组件化编码流程：​ (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。​ (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：​ 1).一个组件在用：放在组件自身即可。放在他们共同的父组件上（状态提升）。​ (3).实现交互：从绑定事件开始。props适用于：​ (1).父组件 ==> 子组件 通信​ (2).子组件 ==> 父组件 通信（要求父先给子一个函数）
vue2 vue3 js es6 html css 知识点
weixin_71783532的博客
08-03 1015
生命周期函数 又叫钩子函数 是到了某一个时间点会自动触发 我们讨论的是 vue 实例的钩子函数 从 vue 实例创建到销毁的过程中 到了一定的时间节点就会触发是 ECMAScript 的第六个版本 在 es5 的基础上新增加了一些语法 js 分成三部分 dom（文档对象模型） bom（浏览器对象模型） ECMAScript（js 语法）1.JavaScript（以下简称 js）的数据类型分为两种：原始类型（即基本数据类型）和对象类型（即引用数据类型）；...
解决vue 按钮多次点击重复提交数据问题
12-02
这个其实是一个很细节的问题。 如果我们操作一个按钮，然后在按钮点击的时候绑定事件。 事件分为两种情况： •第一种： 不操作数据型 •第二种： 操作数据型 <button @click="submit()" :disabled="isDisable">点击</button> [removed] export default { name: 'TestButton', data: function () { return { isDisable: false } }, methods: { submit()
学习vue源码（13）手写$nextTick
weixin_43964148的博客
06-10 208
1.概述nextTick接收一个回调函数作为参数，它的作用是将回调延迟到下次DOM更新周期之后执行。它与全局Vue.nextTick的原理时一样的。可能有同学对将回调延迟到下次DOM更新...
vue 定时执行只执行一次解决办法
qingfulang9322的博客
09-19 1万+
methods: { autoPlay () { this.mark++; if (this.mark === 4) { //当遍历到最后一张图片置零 this.mark = 0 } }, play () { setInterval(this.autoPlay(), 2500) }, c...
笔记,前端重点 js,es6,vue2,vue3,小程序...... (记得收藏)
qq_61686552的博客
06-16 795
前端 重点，重点，重点
vue面试必备,笔记(祝您面试成功,记得收藏)
qq_61686552的博客
07-06 739
面试必备 收藏不迷路
超实用的Vue 小技巧（开发常用整理）
前端程序猿的博客
01-21 3239
学习成为一个更好的Vue开发者并不总是关于那些需要花时间和精力才能掌握的大概念。掌握一些技巧和窍门，可以让我们的编程生活变得更容易--没有大量重复的工作。 在用 Vue 开发的这几年里，我学到了很多有用的技巧。有些很取巧，有些几乎每天都在用，有些则更高级--但它们都很有用。
解决按钮短时间内被多次点击的问题
02-15
多次点击一次调用，这个代码是用来解决一个按钮在短时间内被多次点击，被多次调用的问题的。这是一个简单的小例子，最大的优点就是简单。
vue 实现click事件只触发一次
weixin_39428080的博客
08-21 1万+
第一种是类似评价，点击之后就发表 第二种是点击提交按钮的时候都会判断input，但是疯狂点击提交按钮只想要一次，不会出现调用多次接口的情况 ...
vue中如何让函数只执行一次
热门推荐
weixin_43254676的博客
06-10 3万+
1. 定义标记变量 data() { return { firstPlayFlag: true, // 第一次播放标记 } } 2.应用 if（this.firstPlayFlag） { // 执行函数 this.firstPlayFlag = false } else { } ...
Vue表单提交点击事件只允许点击一次
Aybuai的博客
07-28 2416
常用出现场景：商城点击订单提交 1、使用Vue封装事件 body： <template> <div> <el-button @click.once="submitOrder()">提交订单</el-button> </div> </template> 方法： methods: { submitOrder() { // 处理逻辑 } } 2、使用原生JS事件 在数据data里面声明一个flag属性 data() {
vue只加载页面时候触发一次事件
qq_41610686的博客
12-29 9690
//加载页面时只触发一次点击事件 &lt;div v-on:click.once="btn()"&gt; 获取二维码图片 &lt;/div&gt;
debounce函数让一个方法在一定时间内只能执行一次
子非鱼
01-10 7543
debounce函数让一个方法在一定时间内只能执行一次 源码： function debounce(func, wait, immediate) { let timeout, args, context, timestamp, result const later = function() { // 据上一次触发时间间隔 const last = +new Da
vue阻止点击事件穿透
最新发布
10-11
可以在事件处理函数中使用`event.stopPropagation()`方法来阻止点击事件的穿透。例如： ``` 按钮 methods: { handleClick() { console.log('点击了div') }, handleBtnClick(event) { event....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值