ngRightClick 事件的 clientY 和 clientX 参数答案

【问题标题】：clientY and clientX parameter of ngRightClick eventngRightClick 事件的 clientY 和 clientX 参数
【发布时间】：2015-01-26 11:37:20
【问题描述】：

我正在处理一个列表，我需要在单击<tr> 时打开一个小菜单。我找到了一些例子，例如THIS 但这适用于左键单击...我想拦截右键单击。由于我正在使用 Angular，因此我使用了以下指令：

app.directive('ngRightClick', function($parse) {
    return function(scope, element, attrs) {
        var fn = $parse(attrs.ngRightClick);
        element.bind('contextmenu', function(event) {
            scope.$apply(function() {
                event.preventDefault();
                fn(scope, {$event:event});
            });
        });
    };
});

我已经清除了包含我的菜单的 div：

<div id="mailingListMenuContainer" class="ms-core-menu-box ms-core-defaultFont ms-shadow">
    <ul class="ms-core-menu-list">
        <li text="Betrieb ausschließen" class="ms-core-menu-item ">
            <a class="ms-core-menu-link" href="javascript:;" onclick="return false;" title="Betrieb ausschließen">
                <div class="ms-hide"></div>
                <div class="ms-core-menu-label">
                    <span class="ms-core-menu-title">Betrieb ausschließen</span>
                    <span></span>
                </div>
                <span class="ms-accessible"></span>
                <div></div>
            </a>
        </li>
    </ul>
</div>

当右击发生时：

$scope.menuExclude = function($event){
    var container = $('#mailingListMenuContainer');
    container.css({
        top: $event.pageY + "px",
        left: $event.pageX + "px"
    });
    container.show();
};

问题是页面很大，菜单出现在tr上方...我在THISJQuery 示例中发现了同样的问题。如果您缩小页面以使滚动出现，然后滚动到底部，您将看到菜单没有出现在应该出现的位置。

我看到事件参数的值是pageY + pageX 和clientY + clientX。我不明白的是，为什么在我的情况下pageY 总是等于clientY 和pageX 到clientX。如果页面向下滚动，它们不应该有所不同吗？

【问题讨论】：

标签： javascript jquery css angularjs right-click

【解决方案1】：

如果有滚动页面，我发现的大多数示例都不起作用......我使用这个算法来获得位置：

var getOffsets = function($event){
    var p = {};
    var body = $event.target;
    p.x = body.offsetLeft;
    p.y = body.offsetTop;
    while (body.offsetParent) {
        p.x = p.x + body.offsetParent.offsetLeft;
        p.y = p.y + body.offsetParent.offsetTop;
        if (body == document.getElementsByTagName("body")[0]) {
            break;
        }
        else {
            body = body.offsetParent;
        }
    }
    return p;
}

但是，在那之后你还必须考虑其他因素，我的情况是：

var GetExactClickPosition = function($event){

    var tr = $($event.target);
    if ($event.target.localName != 'tr'){
        tr = $($event.target).closest('tr');
    }

    var listDiv = $($event.target).closest('div');
    var p = getOffsets($event);
    var container = $('#mailingListExcludeMenuContainer');

    container.css({
        top: p.y - listDiv.scrollTop() - tr.height() - container.height() + $event.offsetY + "px",
        left: p.x + $event.offsetX + "px"
    });
    container.show();
};

我在页面的主滚动条内有一个带有滚动条的列表... 我使用它是为了在鼠标点击的位置显示一个小菜单。

希望对某人有用...

【讨论】：