使用触摸事件时保持菜单不关闭答案

【问题标题】：Keep menu from closing when using touch events使用触摸事件时保持菜单不关闭
【发布时间】：2017-01-21 01:58:49
【问题描述】：

我已经连接了一个简单的长触摸功能，在 500 毫秒后使用“打开”API 命令打开上下文菜单。菜单打开。然而，在“touchend”菜单消失。只有当我在“touchend”之前触摸上下文菜单时它才会保留。有没有办法防止这种行为？从源代码来看，只有 dom 不同部分的“touchstart”才会触发关闭事件。

代码如下，以防万一。并不是说我的上下文菜单需要 tr 的代表 - 在下面解释 targetTr 变量的使用。

var mobDevice_onLongTouch,
    mobDevice_touchTimer,
    mobDevice_longPressDuration = 500; //length of time we want the user to touch before we do something

//handle long press on the datatable
var touchArea = document.querySelector("#table");
touchArea.addEventListener("touchstart", touchAreaTouchStart, false);
touchArea.addEventListener("touchend", touchAreaTouchEnd, false);

function touchAreaTouchStart(e) {
    var targetTr = $(e.target).closest('tr');
    mobDevice_touchTimer = setTimeout(function () { touchArea_onLongTouch(targetTr) }, mobDevice_longPressDuration)
};
function touchAreaTouchEnd(e) {
    if (mobDevice_touchTimer) {
        clearTimeout(mobDevice_touchTimer) //reset the clock
    }
};

function touchArea_onLongTouch(target) {
    $('#table').contextmenu('open', target);
};

【问题讨论】：

标签： javascript jquery-ui-contextmenu

【解决方案1】：

我解决了这个问题。 ContextMenu 工作正常，但我正在触摸的 DOM 控件在 touchend 上注册了一个更改事件（以突出显示表格行）。所以上下文菜单在触摸和按住期间弹出，然后在触摸结束时被 DOM 更改清除。

解决方案是手动添加高亮表格行事件到 touchstart 和 preventDefault on touchend（当触摸目标在表格内时）

【讨论】：