如何在移动设备中使用 ondblClickRow 事件

Posted 2023-03-14

【中文标题】如何在移动设备中使用 ondblClickRow 事件

【英文标题】：How to use ondblClickRow event in mobile devices

【发布时间】：2015-11-08 15:53:57

【问题描述】：

免费 jqgrid 包含ondblClickRow 事件处理程序，用于打开订单详细信息。

如果 Google Chrome 进入三星 Galaxy S4 仿真模式，则不会归档此事件。

要重现，请打开

http://jsfiddle.net/amorris/ynw3c/

在三星 Galaxy S4 仿真模式下的 Chrome 中双击 jqgrid 行。 不出现警告框。 单击即可正确选择行。

如何解决这个问题？ 是否应该为此将单独的打开按钮添加到每个 jqgrid 行中，或者是否有更好的方法来允许打开详细信息，例如在桌面中的行中双击。

使用 4.9.2-post

【问题讨论】：

我找到了这个***.com/questions/8825144/…；看来您需要使用 vanilla JS 编写自己的双击检测功能； jquery mobile 还有其他您可能喜欢的功能。

【参考方案1】：

在我看来，您需要将touchstart 句柄绑定到网格并检测在上一个touchstart 事件之后的短时间内触发的touchstart。例如，您可以使用jQuery.data 保存上一个touchstart 事件的时间。

我将您的演示修改为http://jsfiddle.net/OlegKi/yNw3C/12120/，它使用以下代码

$("#grid").bind("touchstart", function (e) 
    var $this = $(this), now = new Date().getTime(),
        lastTouchTime = $this.data("lastTouchTime") || now + 1,
        timeInterval = now - lastTouchTime;
    //console.log(e);
    // the next line use constant 500 as 0.5 sec timeout between taps
    if (timeInterval < 500 && timeInterval > 0) 
        var $tr = $(e.target).closest("tr.jqgrow");
        if ($tr.length > 0) 
            //console.log($tr[0]);
            alert("double touchstart on rowid=" + $tr.attr("id"));
         else 
            alert("double touchstart");
        
    
    $this.data("lastTouchTime", now);
);

在三星 Galaxy S4 仿真模式下，代码至少在 Chrome 中显示警报

【讨论】：

双击更改触摸设备的缩放级别。不确定将 open 函数绑定到它是否合理。我将打开按钮添加到操作按钮列中。因此，可以通过单击此按钮打开详细信息，并且不会更改双击行为。

@Andrus：我自己不会免费使用触摸设备 jqGrid。我只是想向您展示如何处理移动设备上的双击的主要方法。这可能是另一种方式，但这不是我擅长的领域。或许你可以问问其他人。

我没有触摸设备的经验，并尝试使用 jqgrid 为它们创建我的第一个应用程序。此代码需要在 jqgrid 行中双击。选择和超链接通过在触摸设备中单击来激活。所以看起来最好使用单击激活并将为此添加代码到 beforeSelectRow 以提供使用 jqgrid 进行选择的本机用户体验。

@Andrus：我也没有触摸设备方面的经验。对不起！

此解决方案的唯一问题是它检测到任何行上的双击。我添加 lastTouchRowId 的方式与添加 lastTouchTime 的方式相同，以检测是否在同一行上发生双击。