为什么我的点击 simplecontextmenu 位置错误？答案

【问题标题】：Why is my taphold simplecontextmenu position wrong?为什么我的点击 simplecontextmenu 位置错误？
【发布时间】：2014-04-14 21:47:45
【问题描述】：

我正在为我的 jQuery 移动上下文菜单使用一个名为 simple-context-menu 的 jQuery 插件。我对它很满意，并且比 jQuery Mobile 上下文菜单更喜欢它，因为 jQuery Mobile 上下文菜单拥有（对我而言）太多的嵌套标记并且需要许多冗余的 CSS 类标签。 “简单上下文菜单”只需要一个简单的数组，这就是为什么它非常适合我的需求。

但是，在右键单击时，它可以按预期工作，但是当我尝试使用“taphold”而不是右键单击时，菜单会出现在错误的位置（远在右边）

$(function() {
$('.touchableFile').contextPopup({
   title: 'File Options',
   items: [
    {label:'Go To', icon:'/images/txt.png', action:function() { alert('clicked 1') } },
    {label:'Rename', icon:'/images/txt.png', action:function() { alert('clicked 1') } },  
    {label:'Delete', icon:'/images/txt.png', action:function() { alert('clicked 2') } }
    ]
});
$(".touchableFile").on("taphold", function(e) { 
    $(this).triggerHandler('contextmenu'); 
}); 
});

我怎样才能通过点击来实现与真正的右键单击相同的 mouseX mouseY？

【问题讨论】：

标签： jquery jquery-mobile touch contextmenu

【解决方案1】：

taphold 是一个不携带originalEvent 对象的自定义事件。该对象保存.pageX 和.pageY 的值。因此，您需要使用touchstart 事件来获取.pageX 和.pageY 位置值，以便稍后在触发taphold 时使用它们。

你需要对上下文菜单做一些小的JS修改，如下：

在JS文件中，将下面的代码放在this.bind('contextmenu', function(e) {这一行之前。此代码将检索 X 和 Y 位置

var touchX, touchY;

this.on("touchstart", function (e) {
    e.preventDefault();
    touchX = e.originalEvent.touches[0].pageX;
    touchY = e.originalEvent.touches[0].pageY;
});

然后改变

this.bind('contextmenu', function (e) {
    var menu = createMenu(e)
        .show();
    var left = e.pageX + 5,
        top = e.pageY;

到

this.on('taphold', function (e) {
    var menu = createMenu(e)
        .show();

    var left = touchX + 5,
        top = touchY;

Demo ⁽¹⁾

^{(1) 在 iPhone 5 - Safari Mobile 上测试}

【讨论】：