给html元素绑定单击和双击事件

1 直接绑定时双击函数被触发时单击函数也会被触发而且是先被触发两次

    <div class="test" οnclick="test()" οndblclick="dblclickt()">click-test</div><script>function test(){console.log('click');}function dblclickt(){console.log('dblclick')}</script>//上面的代码将会在控制台输出   click   click   dblclick

为了让双击时不触发单击的函数可以使用timeout来处理

    <div class="test" οnclick="test()" οndblclick="dblclickt()">click-test</div><script>var time = null;function test(){clearTimeout(time);  //首先清除计时器time = setTimeout(() => {console.log('click');},300);}function dblclickt(){clearTimeout(time);console.log('dblclick')}</script>

在vue中绑定可以同样的使用该方法

@click="clicktest()" @dblclick="test()"

let time2 = null;
export default { data(){},methods:{test(){time2 && clearTimeout(time2);console.log('dblclick test')},clicktest(){time2 && clearTimeout(time2);time2 = setTimeout(()=>{console.log("click")},300)}}
}

也可以通过修饰符 2.5.0 新增的 .exact 等或者.ctrl 等来绑定不同的函数如：

@click.exact ="clicktest()" @dblclick.exact ="test()"

@click.exact = ‘’ //表示只单击时

@click.ctrl.exact = ‘’ //表示按住ctrl单击时

但是即使有.exact也需要timeout来配合使用

但是值得注意的是：

在vue中给普通的元素绑定click事件若使用.native修饰符，该点击事件将不起作用，即@click.native="myClick()" @dblclick.native="myClick()" 点击时不会触发myClick函数

而在自定义的组件上绑定点击函数可以使用 @click.native=“myClick()”

转载于:https://www.cnblogs.com/xhliang/p/11159026.html

给html元素绑定单击和双击事件相关推荐

JS - 解决鼠标单击、双击事件冲突问题（原生js实现）
由于鼠标双击时每一次触发双击事件都会引起两次单击事件和一次双击事件,原生的js不提供专门的双击事件. 因为业务原因,双击和单机都绑定了不同的业务,在双击的时候又触发了单机,影响了页面的正常显示出现问 ...
javascript 鼠标单击和双击事件并存的实现方法
http://www.jbxue.com/article/8033.html 本文介绍下实现javascript鼠标单击与双击事件并存的方法,经常需要为一个链接注册双击事件,或让一个按钮或者其他元素上 ...
js中单击和双击事件的区分
js中单击和双击事件的区分 1. 首先要了解鼠标点击(单击或双击)时包含的事件. mousedown 事件: 当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件.与 cl ...
GridView/DataGrid行单击和双击事件实现代码_.Net教程
功能: 单击选中行,双击打开详细页面说明:单击事件(onclick)使用了 setTimeout 延迟,根据实际需要修改延迟时间 ;当双击时,通过全局变量 dbl_click 来取消单击事件的响应 ...
为元素绑定多个相同事件绑定事件的另一种方式复习介绍元素的事件绑定
为元素绑定多个相同事件 <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
ASPxGridView1单击，双击事件
ASPxGridView1没有自带的单击,双击事件,所以要自己写,<script language="javascript" type="text/javascri ...
禁用CMFCRibbonApplicationButton的单击和双击事件
为了禁用CMFCRibbonApplicationButton的单击和双击事件,我重载了CMFCRibbonApplicationButton如下: 1. MyRibbonApplicationBut ...
jQuery —— 元素绑定单击事件（click），但是双击该元素也能触发单击事件，同时会触发两次单击事件的问题
最近做项目遇到一个问题,给元素绑定了单击事件,但是双击该元素时同样会触发单击事件,并且触发两次的问题,网上找了解决办法基本上都是用 clearTimeout .setTimeout 解决,但是效果不是 ...
vue给同一元素绑定单击click和双击事件dblclick，执行不同逻辑
原博:https://www.cnblogs.com/feng-xl/p/9375992.html 在做项目过程中,需求是点击孔位单击弹出对话框查看产品总数,双击弹出对话框查看详情.一开始直接clic ...

给html元素绑定单击和双击事件

给html元素绑定单击和双击事件相关推荐

最新文章

热门文章