vue.js:如何处理同一元素

时间:2016-12-23 15:24:07

标签: javascript vue.js

我有一个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

7 个答案:

答案 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");
   }
 }
})

查看这个有用的小提琴https://codepen.io/robertourias/pen/LxVNZX

答案 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>

工作小提琴: https://jsfiddle.net/MapletoneMartin/9m62Lrwf/

答案 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;
    }
},