Question

我正在尝试设置contextMenu的位置并使用Jquery jquery.ui.position。对于ContextMenu，我正在使用此libaray：-

https://swisnl.github.io/jQuery-contextMenu/demo

我正尝试将ContextMenu定位如下：-

$(document).ready(function() {

    $.contextMenu({
        selector: 'td[id="tdMenu"]',
        trigger: 'left',
        position: function (opt, x, y) {

            try {

                opt.$menu.position({
                    my: 'right top',
                    at: 'right bottom',
                    of: $("#tdDiv")
                });

            } catch (e) {

            }

        },
        items: {

            "0": { name: "Hi" },
        }
    });
});

HTML如下：-

<table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td id="tdDiv" style="background-color: yellow;">
                Menu Div
            </td>
        </tr>
         <tr>
            <td id="tdMenu">
                Click Here
            </td>
        </tr>
    </table>

在IE 11中，一旦页面将被加载，并且一旦我单击ID为tdMenu的td，jquery.ui.position将无法正确计算偏移量。在第二次单击它正确计算。

我发现的是在jquery.ui.position内部，其计算偏移量如下：-

function getDimensions( elem ) {
    var raw = elem[0];
    return {
        width: elem.outerWidth(),
        height: elem.outerHeight(),
        offset: elem.offset() // On first click its calculating wrong value and on second it calculates correctly.
    };
}

我也给身体留出以下余地：-

<body style="margin: 0px;">

如果我要删除此边距，它也会在第一次单击时正确计算。

我无法消除身体的边缘。解决这个问题的办法是什么？

Answer 1

从您发布的内容来看，这似乎是在页面加载完所有样式和内容之前计算offset值的经典情况，导致您的contextMenu时偏移值错误初始化。

替换

$(document).ready(function() {
  // executes when DOM parser reaches </html> tag

  $.contextMenu({/* your stuff here */})
});

与

$(window).on('load', function() {
  // executes when all external resources/references (images, scripts,
  // stylesheets, iframes, etc...) have finished loading

  $.contextMenu({/* your stuff here */ })
});

可能可以解决您的问题，但是如果没有 Minimal, Complete, and Verifiable example，就不可能进行测试并确保它适合您的情况。

注意：上述解决方案将延迟$.contextMenu()的初始化，直到页面加载完毕。如果您的页面需要很长时间来加载其所有资源，并且您希望在此之前初始化$.contextMenu，则一种解决方法是在$(document).ready上对其进行初始化，并在$(window).load上对其进行更新：< / p>

function cMenu() {
    $.contextMenu({
      /* your stuff here */ 
    });
}
$(document).ready(cMenu);
$(window).on('load', cMenu);

实际上，页面中只有一个项目会影响该偏移量（很可能是样式表）。如果您是哪一个（通过消除，禁用页面中的内容），则无需等待其余的加载，您只需将函数的重新运行绑定到该元素的{{1} }事件。

Answer 2

在contextMenu事件show之前删除身体样式，并在activated事件之后重置身体样式。

您可以尝试：

$(document).ready(function() {
    var bodystyle = '';
    $.contextMenu({
        selector: 'td[id="tdMenu"]',
        trigger: 'left',
        events: {
               show : function(options){
                    bodystyle = $('body').attr('style');   
                    $('body').attr('style','');            
               },

               activated : function(options){
                    $('body').attr('style', bodystyle ) ;            
               }
        }
        position: function (opt, x, y) {

            try {

                opt.$menu.position({
                    my: 'right top',
                    at: 'right bottom',
                    of: $("#tdDiv")
                });

            } catch (e) {

            }

        },
        items: {

            "0": { name: "Hi" },
        }
    });
});

如果在IE

2 个答案: