Question

我同时具有制表器表的rowclick和rowdblclick处理程序，我想对rowclick处理程序进行去抖动处理，这样我就不会得到两次rowclicks，然后每当我对某行进行dblclick调用时，rowdblclick都会触发，是否有内置的方法来做到这一点？我知道我可以使用rxjs来创建主题并进行反跳，但是如果存在内置的反跳，我想使用它。

Answer 1

我有一个非常相似的问题-当基于列的cellClick触发时，全局行/ cellClick也触发。

我的解决方法是将e.stopImmediatePropagation（）放入基于列的cellClick函数中。这仍然允许rowDblClick事件向上/向下传递（冒泡？）。但是，这可能与您所需要的相反，除非您通过在事件栏中添加双击来消除双击的需要？

var editIcon = function(cell, formatterParams, onRendered){ //plain text value
    return "<i class='fa fa-edit'></i>";
};

var table = new Tabulator("#table", {
    columns:[
        {title:"Name", field:"name"}, //etc
        {formatter:editIcon, headerSort:false, width:40, align:"center", cellClick:function(e, cell){ 
        // do whatever
            e.stopImmediatePropagation(); //prevent table wide rowClick() from also triggering
        },
    ],
    rowClick:function(e, row){
        //all rows/cells will inherit this function, however the cell level cellClick function will take the first bite of the event before bubbling up to rowClick
    },
});

不知道这是否有帮助，可能是一些更优雅的方式，但是对我来说有些帮助。

Answer 2

最后我要做的是使用EventEmitter并执行.emit并从单击的行中传递ID。然后，在我订阅EventEmitter的管道中，我做了一个.distinct，在双击时消除了对同一行的第二次单击。

export class XYZComponent implements AfterViewInit {
ngAfterViewInit(): void {
  this.tabX = new Tabulator('#xyz', {
        columns: [
          // 1
          {
            title: 'clickable column',
            field: 'X'
            headerSort: false,
            // visible: false,
            width: '5rem',
            cellDblClick: this.itemDblClick.bind(this),
            cellClick: this.itemClick.bind(this),
          },
          //...
        ]
      }
    );
}

  private itemClick(e, item) {
    // both cells and rows have a getData function
    this.onItemSelect(item.getData());
  }
  private itemDblClick(e, item) {
    // both cells and rows have a getData function
    this.onItemEdit(item.getData());
  }
}

export class ABCComponent implements AfterViewInit {

ngAfterViewInit(): void {
    this.selectItemSubject
      .pipe(
        takeWhile(() => this.active)
        , distinctUntilChanged() // this will eliminate the second click
      )
      .subscribe(item => {
        // load additional data for item
      });

    this.editItemSubject.pipe(
      takeWhile(() => this.active)
    )
    .subscribe((item) => {
      // do whatever to edit the item
    });

  }
}

Answer 3

这是标准的JavaScript单击事件行为，而不是制表器特有的

每次绑定单击和双击处理程序时，都会首先触发单击处理程序。

我建议您使用设置的超时来检测是否发生了双击，然后将双击事件清除为超时，以防止发生点击操作：

  var debounce = null; //hold debounce timer

  var table = new Tabulator("#table", {
    rowClick:function(e, row){
        debounce = setTimeout(function(){
            //do something
        }, 100)
    },
    rowDblClick:function(e, row){
        clearTimeout(debounce);
    },
});

有没有办法消除制表符中的rowclick

3 个答案: