dgrid 行和双击事件答案

【问题标题】：dgrid rows and double click eventdgrid 行和双击事件
【发布时间】：2015-11-06 23:42:41
【问题描述】：

我有一个dgrid 表，其选择模式为toggle。我的一个要求是实现双击一行来触发一个函数。

这是我所拥有的：

grid.on('.dgrid-content .dgrid-row:dblclick', function () {
    window.alert('Hello world!');
});

问题是双击也会导致selection events dgrid-select 和dgrid-deselect 触发，因为它还注册了两次单击以进行选择。

我已尝试添加此代码，但它没有按预期工作：

var timer;

grid.on('.dgrid-content .dgrid-row:click', function (event) {
    var row = this;
    if (timer) {
        event.preventDefault();
        event.stopPropagation();
        event.stopImmediatePropagation();
        clearTimeout(timer);
    } else {
        timer = window.setTimeout(function() {
            // something to make the click go through?
            row.emit('something here');
            clearTimeout(timer);
        }, 250);
    }
});

有没有办法做到这一点？

我咨询了How to use both onclick and ondblclick on an element?，但那里的答案似乎对我的情况不起作用。

我还查看了 misc 实用程序，也许它是我需要的 debounce 函数，但我不知道如何使用它。

【问题讨论】：

标签： javascript mouseevent dom-events double-click dgrid

【解决方案1】：

您可以使用 Dgrid 类中的函数 row 和 cell ：

 define([
     "dojo/_base/declare",
     "dojo/_base/lang", // hitch
     "dgrid/OnDemandGrid"
 ], function (declare, lang, OnDemandGrid){
     return declare(OnDemandGrid, {

         _onSingleClickAction: function (event) {
             var row = this.row(event), // dgrid/Grid methods
                 cell = this.cell(event);

             /********************
             * WORKING WITH DATA *
             ********************/
         }, // _onSingleClickAction

         _onDblClickAction: function (event) {
             var row = this.row(event), // dgrid/Grid methods
                 cell = this.cell(event);

             /********************
             * WORKING WITH DATA *
             ********************/
         }, // _onDblClickAction

         postCreate: function () {
             this.inherited(arguments);

             this.on(".dgrid-content .dgrid-row:dblclick", lang.hitch(this, "_onDblClickAction"));
             this.on(".dgrid-content .dgrid-row:click", lang.hitch(this, "_onSingleClickAction"));
         } // postCreate
     }); // declare
 }); // define

最终类定义：

 define([
     "dojo/_base/declare",
     "dojo/_base/lang", // hitch
     "dgrid/OnDemandGrid"
 ], function (declare, lang, OnDemandGrid){
     return declare(OnDemandGrid, {

         onDblClick: function (row) {  // empty method for definition in childs
             console.log(row.id);      // record id from the store
             console.log(row.data);    // full object from the store
             console.log(row.element); // DOM element
         },

         _onDblClick: function (event) { // private method
             this.onDblClick(this.row(event)); // extract data from event
         }, // _onDblClick

         postCreate: function () {
             this.inherited(arguments);

             this.on(".dgrid-content .dgrid-row:dblclick", lang.hitch(this, "_onDblClick"));
         } // postCreate
     }); // declare
 }); // define

[1]https://github.com/SitePen/dgrid/blob/v1.2.1/doc/usage/Working-with-Events.md

【讨论】：