vue项目——解决按下空格键执行上一次鼠标点击事件

最新推荐文章于 2023-12-13 14:48:50 发布
最新推荐文章于 2023-12-13 14:48:50 发布
阅读量2.3k 收藏
点赞数 2
分类专栏： Vue语音数据平台 JavaScript原生 文章标签： 点击事件 键盘事件 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40556950/article/details/102804379
版权
在Vue项目中遇到一个问题，按下空格键会执行上一次的鼠标点击事件，导致音频播放错误。通过研究和尝试，解决了这个问题。解决方案是在点击按钮时触发聚焦事件，避免事件冲突。在页面加载时，聚焦音频部分的section元素，使得空格键能正常控制播放。如果有更好的方法，欢迎交流。
摘要由CSDN通过智能技术生成

在做这个数据平台验收部分的时候，测试环节发现了一个bug。在这个页面中我需要用"空白键"来控制中间按钮的播放与暂停，而当我点击"通过"按钮之后，再按下"空白键"的时候就会执行前面的点击事件，音频直接变成下一个的加载(相当于再次的点击操作)

 在网上搜了解决方案，但是好像都没有比较适合我这个问题的解决方案。

 参考链接：

https://houbean.github.io/2016/09/20/click%E4%BA%8B%E4%BB%B6/

https://www.iteye.com/blog/yunzhongxia-813956

https://bbs.csdn.net/topics/390467076?list=24782041

http://www.myexcept

最低0.47元/天 解锁文章
一只没有感情的小杀手
关注
专栏目录
Vue——@功能PC端实现总结
小王的技术库
06-18 2497
近期需要接到一个需求，需要在输入框中实现@通知用户的功能，这个功能现在也有很多应用都有，像我们常用的QQ空间，微博这些，开始看到这个需求，心里一阵惊恐，没做过啊~~我们大体的思路就是：当监听到用户输入@的时候我们弹出人员选择器，这时候我们需要记住现在光标所在的位置，当用户选择人员完毕之后，我们创建一个span标签在插入到我们刚刚记录光标的位置，并且把我们输入的@删除，将光标放在这个节点的最后。按住shift + @ 的时候，弹出人员选择器人员选择器要跟随光标的位置出现选择时 @的用户标签插入当前的光标位置中
解决按下空格键执行上一次鼠标点击事件
yunzhongxia的专栏
11-17 2549
先来看下一段代码的执行效果。代码如下：   <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" > <mx:Label text="点击保存按钮，鼠标不要移动，按下空格键，观察下面点击事件执行次数"/&a
vue项目中遇到的问题（1、点击空格或回车会触发鼠标上次的点击事件；2、自动语音播报；3、引入钉钉登录）
weixin_44402343的博客
12-10 3033
原因：因为button按钮点击之后焦点没有移除，点击空格或回车之后会继续执行button的click事件 解决办法： @keyup.prevent @keydown.enter.prevent <el-button type="primary" size="small" @click="addProject" @keyup.prevent @keydown.enter.prevent>添加项目</el-button> ............
空格键自动触发上一次点击事件
weixin_38763607的博客
11-12 1044
卡了半天。。这个问题是因为一个统一的butoon组件造成。。其实就是butoom焦点 可以看下这位博主所描述的。。。虽然我认为他最后方法不对 在create里面放refs指定dom节点根本接收不到。。。但是他描述的方案是对的。。 总而言之就是 焦点问题。。每次点击重置下焦点就行 focus() https://blog.csdn.net/qq_40556950/article/details/102804379 最后 一般来说空格键 最为一个专属的按钮快捷键 所以 每次点击设置...
VUE 点击回车触发事件和遇到的坑
Liu_JiaqiPro的博客
12-09 1157
<el-input ref="google" v-model="Code" @keyup.enter="submit()" autocomplete="off" placeholder="请输入内容" style="margin-top: 20px" > </el-input> @keyup.enter="方法名" 一般我们写表单的时候一般放在.
vue elementui el-button点击后阻止空格触发点击事件
m0_37378152的博客
06-30 1547
1.@keyup.space.native.prevent=''fun'' 2.$('#id').blur() // 使按钮失焦 3.this.buttonDisabled = true // 禁用按钮 <el-button @click="clickFun" :disabled="buttonDisabled">点击</el-button>
vue实现搜索框历史记录功能,本地储存,最新点击排在最前面
lucky_ax的博客
06-05 4678
需求: 输入框搜索历史记录,去重,最新点击的排在最前面,可点击删除 效果: 话不多说,上代码… HTML部分 <div class="head_top"> <div class="left"> <img src="../fangdajing.png" /> <input placeholder="请输入搜索关键字" ref="getValue" v-mo
vue基础知识笔记（一）—— 指令
weixin_51341611的博客
03-01 989
vue基础知识笔记 —— 指令详解，持续更新中。
vue 数据绑定、数据渲染、事件——0801
张静的博客
08-06 475
一、数据绑定
vue——v-on指令的常用修饰符
weixin_44649210的博客
11-02 929
stop 作用： 阻止事件冒泡 <body> <div id="father" @click="bubbling('father')" style="background-color: red;"> <button id="son" @click="bubbling('son')">点击</button> </div> <script> let vm = new Vue({
点击空格时阻止浏览器触发默认事件
m0_60380883的博客
05-26 171
阻止浏览器默认的点击空格事件
vue项目频繁敲空格或者回车，触发多次相同请求
最新发布
Lella的博客
12-13 554
解决方案：在App.vue文件中添加对阻止空格 回车 小键盘enter触发button按钮点击事件，注意，用keyCode比较保险，有些电脑的键盘上有两个回车键，他们的key跟name可能是不同的。
vue切换页面，前一个页面的异步方法还在继续执行
qq_41539807的博客
04-02 1738
vue切换页面，前一个页面的异步方法还在继续执行
解决Vue监听键盘事件,执行鼠标点击事件后，立即点击键盘。会触发上一次鼠标的点击事件
时光有伱，记忆成花~
06-16 693
给键盘事件触发前增加 e.stopPropagation()，该方法可以停止事件传播，从而确保键盘事件不会影响到鼠标事件的处理过程。Vue监听鼠标和键盘事件，执行鼠标点击事件后，立即点击键盘，触发键盘点击事件，会触发上一次鼠标的点击事件。
Vue的事件处理，点击事件
热门推荐
qq_46149597的博客
11-03 1万+
vue点击事件，事件处理：事件修饰符、按键修饰符、鼠标修饰符、v-bind修饰符、v-model修饰符
vue 项目中使用键盘回车或空格按键触发事件
小破孩的博客
12-06 8679
vue 项目中使用键盘回车或空格按键触发事件
vue 项目中使用键盘回车按键触发事件
pickinguptrash的博客
02-13 3292
我最近项目要求按下enter键就登录或者注册之类的触发,我不知道为什么用vue的 @click.enter这样的不管用,到现在都没整明白为啥,希望知道的给讲解一下.然后在methods里面加上一个方法,监听这个方法,e.keyCode 是每个按键的编码，13是回车键。但是,监听不去掉不太好,有点冗余,所以可以在。vue声明周期销毁前和销毁时移除这个监听。我看了半天人家是给页面加了一个监听。
SpringBoot+vue+elementUI如何用JavaScript实现模拟鼠标点击事件来实现点击按钮一次实现点击按钮两次
04-25
我理解您的问题是，如何使用JavaScript模拟鼠标点击事件来实现在SpringBoot中使用vue elementUI点击按钮两次的效果。对于这个问题，您可以使用JavaScript中的dispatchEvent方法来触发鼠标点击事件。 具体实现步骤如下： 1. 获取需要点击的按钮元素，例如： ``` var btn = document.querySelector('.el-button'); ``` 2. 创建一个鼠标点击事件，例如： ``` var event = new MouseEvent('click', { bubbles: true, cancelable: true, view: window }); ``` 3. 使用dispatchEvent方法触发鼠标点击事件，例如： ``` btn.dispatchEvent(event); ``` 如果您想实现点击按钮一次实现点击按钮两次的效果，您可以在按钮元素上绑定一个监听器，当第一次点击时记录点击的时间，第二次点击时判断当前时间与上一次点击时间的差值，如果在规定的时间范围内，则认为是连续第二次点击，执行对应的逻辑即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值