js 单击时间为:
onclick
双击事件为:
ondblclick
如下是一个演示,想必很清楚,复制代码运行一下就懂了: <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script>
function
ondblclick_f(){
alert("这里是双击事件!");
1、OnClientClick是客户端事件处理方法,一般采用JavaScript来进行处理,也就是直接在IE端运行,一点击就运行;
2、OnClick是服务器端事件处理方法,在服务器端也就是IIS中运行,点击后,先执行postback,再运行;
3、OnClientClick常用来做一些客户端的检测。当然也可以放在服务器端检测,但是需要与服务器进行交互,消耗资源,而且用户体验也不好。
<p>马云的年龄:{{age}}岁</p>
<input type="button" @dblclick='reduce(10)' value="减少10岁">
<input type="button" @dblclick='increase(10)' value="增加10岁">
<script src="vu
html部分代码如下所示:
<button class="btn btn-default" data-toggle="modal" @dblclick="copyText()">登录</button>
<div id="modalget">
js部分代码如下所示:
类的方法默认不会自动绑定 this,在调用时如果忘记绑定 this,那么 this 的值将会是 undefined。
通常如果不是直接调用,应该为方法绑定 this。绑定方式有以下几种:
1、在 onClick 时使用匿名(箭头)函数绑定
<button onClick={() => this.handleClick()}>按钮</button>
<!--...
1. 使用修饰符
Vue提供了修饰符来处理事件,我们可以使用 `@click` 和 `@dblclick` 两个事件,加上 `.prevent` 修饰符来防止浏览器默认行为,以及 `.stop` 修饰符来阻止事件冒泡。
<template>
<div @click.stop.prevent="
onClick" @dblclick.stop.prevent="
onDblClick"></div>
</template>
<script>
export default {
methods: {
onClick() {
// 单击事件处理函数
onDblClick() {
// 双击事件处理函数
</script>
2. 使用计时器
当用户单击一个元素时,设置一个计时器,在一定时间内判断是否触发了双击事件。如果在这段时间内触发了双击事件,则取消单击事件的触发。
<template>
<div @click="
onClick" @dblclick="
onDblClick"></div>
</template>
<script>
export default {
data() {
return {
timer: null
methods: {
onClick() {
this.timer = setTimeout(() => {
// 单击事件处理函数
this.timer = null
}, 300)
onDblClick() {
if (this.timer) {
clearTimeout(this.timer)
this.timer = null
// 双击事件处理函数
</script>
以上两种
方法都可以
解决单击事件和双击事件的冲突问题,具体使用哪种
方法,可以根据实际情况来选择。