使用触摸事件时防止菜单关闭



我已经连接了一个简单的长触摸函数,该函数在 500 毫秒后使用"打开"API 命令打开上下文菜单。菜单将打开。但是,在"触摸端"菜单消失。只有当我在"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);
};

我解决了这个问题。上下文菜单工作正常,但我正在触及的 DOM 控件在 touchend 上注册了一个更改事件(以突出显示表格行)。因此,上下文菜单在触摸和按住期间弹出,然后在触摸端被 DOM 更改清除。

解决方案是手动将突出显示表行事件添加到触摸启动并防止触摸端默认(当触摸目标在表内时)

最新更新