我有一个vue组件,其中包含click / dblclik的单独事件。单击(de)选择行,dblclick打开编辑表单。
<ul class="data_row"
v-for="(row,index) in gridData"
@dblclick="showEditForm(row,$event)"
@click="rowSelect(row,$event)"
>
这样做,我点击双击就发了3个事件。两次点击事件,最后一次是dblclick。由于点击事件首先触发,是否有一种方法(短暂的推迟点击事件的固定数量的ms),以便在双击时停止点击事件的传播?
小提琴here
答案 0 :(得分:11)
正如评论中所建议的那样,您可以通过在特定时间段(比如x)设置计时器来模拟dblclick事件。如果我们在该时间段内没有再次点击,请转到single_click_function()。如果我们得到一个,请调用double_click_function()。收到第二次点击后,计时器将被清除。一旦经过x毫秒,它也将被清除。
请参阅以下代码并使用fiddle。
MediaStreamTrack
答案 1 :(得分:2)
<div id="example-1">
<button v-on:dblclick="counter += 1, funcao()">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
},
methods: {
funcao: function(){
alert("Sou uma funcao");
}
}
})
答案 2 :(得分:1)
我将这种方法用于相同的问题。我使用的诺言可以通过触发200毫秒超时或通过检测到第二次单击来解决。在我最近的网络应用中,它运行得很好。
<div id="app">
<div
@click="clicked().then((text) => {clickType = text})"
@dblclick="clicked().then((text) => {clickType = text})">
{{clickType}}
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
click: undefined,
clickType: 'Click or Doubleclick ME'
},
methods: {
clicked () {
return new Promise ((resolve, reject) => {
if (this.click) {
clearTimeout(this.click)
resolve('Detected DoubleClick')
}
this.click = setTimeout(() => {
this.click = undefined
resolve('Detected SingleClick')
}, 200)
})
}
}
})
</script>
答案 3 :(得分:1)
我认为我有一个更简单的解决方案(我使用的是vue类,但适用相同的原理):
private timeoutId = null;
onClick() {
if(!this.timeoutId)
{
this.timeoutId = setTimeout(() => {
// simple click
}, 50);//tolerance in ms
}else{
clearTimeout(this.timeoutId);
// double click
}
}
它不需要计算点击次数。
答案 4 :(得分:1)
vue组件
// html
<div class="grid-content">
<el-button
@click.native="singleClick"
@dblclick.native="doubleClick"
class="inline-cell">
click&dbclickOnSameElement</el-button>
</div>
// script
<script>
let time = null; // define time be null
export default {
name: 'testComponent',
data() {
return {
test:''
};
},
methods: {
singleClick() {
// first clear time
clearTimeout(time);
time = setTimeout(() => {
console.log('single click ing')
}, 300);
},
doubleClick() {
clearTimeout(time);
console.log('double click ing');
}
}
}
</script>
答案 5 :(得分:0)
点击和点击之间的时间必须短。
为了获得点击和双击,只需要一个计数器即可携带点击次数(例如0.2s),当用户缓慢点击或执行多次点击时,足以捕获用户的意图双击还是默认大小写。
我在这里留下了如何实现这些功能的代码。
new Vue({
el: '#app',
data: {numClicks:0, msg:''},
methods: {
// detect click event
detectClick: function() {
this.numClicks++;
if (this.numClicks === 1) { // the first click in .2s
var self = this;
setTimeout(function() {
switch(self.numClicks) { // check the event type
case 1:
self.msg = 'One click';
break;
default:
self.msg = 'Double click';
}
self.numClicks = 0; // reset the first click
}, 200); // wait 0.2s
} // if
} // detectClick function
}
});
span { color: red }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.js"></script>
<div id='app'>
<button @click='detectClick'>
Test Click Event, num clicks
<span>{{ numClicks }}</span>
</button>
<h2>Last Event: <span>{{ msg }}</span></h2>
</div>
答案 6 :(得分:-1)
selectedFolder = ''; // string of currently selected item
folderSelected = false; // preview selected item
selectFolder(folder) {
if (this.selectedFolder == folder) {
// double click
this.folderSelected = false;
this.$store.dispatch('get_data_for_this_folder', folder);
} else {
// single click
this.selectedFolder = folder;
this.folderSelected = true;
}
},