jQuery

【jQuery】jqGridでセル(行)選択とダブルクリックを区別する

jqGridでセル(行)選択とダブルクリックを別々に処理したい場合のメモ。
jqGridに限らずjQueryでは通常、クリックとダブルクリックのイベントを両方定義する場合、

クリック

ダブルクリック

の順に処理が実行されます。

ではダブルクリック時に、クリックの処理をしたくないケースではどのようにすれば良いか。
「クリック時の処理はsetTimeoutで処理にWaitを設けて、ダブルクリックをハンドルした際にclearTimeoutでクリックの処理を抜けさせる」
というやり方が多いようですね。

実際に行選択(onSelectRow)とダブルクリック(ondblClickRow)で実装してみます。
行選択ではなくセル選択の場合は、onSelectRowではなくonCellSelectに置き換えてください。


サンプルソース


let click_timer = new Array();
let click_num = 0;

$("#gridId").jqGrid({
    data: data
   ,colNames:['列1', '列2']
   ,colModel:[
        {id:'col1', name:'col1', align:'center', width:'100px'}
       ,{id:'col2', name:'col2', align:'center', width:'100px'}
    ]
   ,onSelectRow : function (rowid, status, e) {
        let timer = setTimeout(function() {
            console.log('クリック時の処理');
        }, 250);
        click_timer[click_num] = timer;
        click_num++;
    }
   ,ondblClickRow:function(rowid, iRow, iCol, e){
        click_timer.forEach (function(timer){
            clearTimeout(timer);
        });
        console.log('ダブルクリック時の処理');
    }
});

とりあえず動くことは確認できましたが。。。

もっとスマートにできる方法があればコメント欄から教えて頂きたいです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です