Javascript ngRightClick事件的clientY和clientX参数
我正在处理一个列表,单击Javascript ngRightClick事件的clientY和clientX参数,javascript,jquery,css,angularjs,right-click,Javascript,Jquery,Css,Angularjs,Right Click,我正在处理一个列表,单击时需要打开一个小菜单。我找到了一些例子,例如,但这适用于左键单击…我想拦截右键单击。因为我使用Angular,所以我使用了以下指令: app.directive('ngRightClick', function($parse) { return function(scope, element, attrs) { var fn = $parse(attrs.ngRightClick); element.bind('contextmen
时需要打开一个小菜单。我找到了一些例子,例如,但这适用于左键单击…我想拦截右键单击。因为我使用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});
});
});
};
});
我已清除包含菜单的i 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>
问题是页面太大,菜单出现在屏幕上方。。。我在JQuery示例中发现了同样的问题。如果您按滚动显示的顺序缩小页面,并滚动到底部,您将看到菜单没有显示在它应该显示的位置
我看到事件参数的值是
pageY
+pageX
和clientY
+clientX
。我不明白的是,为什么在我的例子中,pageY
总是等于clientY
和pageX
到clientX
。如果页面向下滚动,它们不应该有所不同吗?如果有滚动页面,我发现的大多数示例都不起作用。。。我使用此算法来获得位置:
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();
};
我有一个在页面的主滚动条内滚动的列表。。。
我使用它是为了在鼠标点击的位置显示一个小菜单
希望对某人有用
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();
};