- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在处理一个列表,我需要在单击 <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上面... 我在THIS中发现了同样的问题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();
};
我在页面的主滚动条中有一个带有滚动条的列表...我用它是为了在鼠标点击的位置显示一个小菜单。
希望对某人有用...
关于javascript - ngRightClick 事件的 clientY 和 clientX 参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28149352/
我正在努力实现双指缩放代码。 我只是检查了 WinJS 语义缩放实现并找到了有趣的代码片段。 适用于 JavaScript 1.0/js/ui.js 的 Windows 库 行号:30710、3072
问题 我需要在调用 timeupdate 后检索 clientX (水平鼠标位置)值。但是,timeupdate 事件不会返回 clientX,而且我似乎找不到解决此问题的方法。 到目前为止的代码(示
我正在创建一个绘图应用程序,但出于某种原因,控制台无法识别 clientX 和 clientY 我已尝试在 chrome 上禁用设备模式,但错误仍然存在
当指针在图片上时,我需要每 1 秒控制台记录一次 x 坐标,但我不知道如何从 js 代码更新“事件”。 function onPic(event) { let xOnPic = event.cli
如何在仅传递 X、Y 坐标的 DIV 上模拟 onclick 事件??? 如果我尝试做到这一点,显然 dispatchEvent 函数需要将在其上引发事件的对象......但那是什么意思传递事件创建坐
我正在构建的程序是一个当鼠标按下时读取鼠标 X 和鼠标 Y 位置的程序。产生错误的代码如下: function updateLocation(event) { setTimeout(funct
由于某种原因,控制台一直显示未捕获的类型错误:无法读取未定义的属性“clientX” 在 moveCircle (script.js:5) 但代码仍然可以在浏览器中运行。您能解释一下该错误是如何出现在
当我调用函数时,我从全局函数中得到:window.event.clientX 和 window.event.clientY,粘贴。 我正在尝试粘贴坐标,但它们因我正在努力解决的一些信息而偏离。 我正要
我试图更好地理解事件属性 clientX 和 clientY 的用法。 当鼠标指针移动到特定的 div 上时,我需要找到鼠标指针的顶部和左侧偏移量。 projectImage(x) 函数附加到 div
您好,我正在尝试学习如何使用 HTML5 canvas 制作绘图应用程序到目前为止我写了这段代码,问题是浏览器控制台一直告诉我无法读取未定义的属性“clientX”,我当然在使用 jquery 这是J
我写了这个简单的代码来在我用鼠标指针点击的位置打印一个小点:- $(document).ready(function(){ $('#pane').click(function(e){
我在使用 jQuery 访问事件的事件坐标时遇到问题。我的代码如下。每当我更改音量 slider 时,它都会返回 undefined 而不是光标位置。 $(document).ready(funct
我正在开发 d3 和 js 项目。 函数的开头如下所示: $(document).ready(function() { d3.select("#aid").select(".abutton")
我正在尝试获取 Chrome 中点击事件的坐标。该事件是使用 ReactComponent 的 onClick 处理程序生成的,如下所示: { console.log('e:', e.clientX
我使用 jQuery 并从 jqueryUI 中拖动。当我将 jQuery 从 1.6 更新到 1.7 时,clientX 和 pageX 属性从事件变量中消失。这是一个例子: http://jsbi
下面的代码一直有效,直到第 47 行被第 48 行替换(即计算 fillStyle)。出于某种原因,尝试使用 clientY 来计算 rgba 的蓝色部分不起作用,而计算 alpha 则不是问题。
当我意识到它在 chrome 控制台中引发了数千个错误时,我只是将这个鼠标跟踪小示例放在一起。 Uncaught TypeError: Cannot read property 'clientX' o
是否可以使用 DOM API 将 pageX, pageY 转换为 clientX, clientY? 我有一个元素,我需要从中找到 clientX 和 clientY。我可以使用 jQuery 的偏
我最近想在 chrome 27 中模拟鼠标事件来模拟点击。更重要的是,事件必须有clientx。 我做了以下编码,但 clientX 值始终为 0,请帮助我,谢谢。 var evt = documen
我创建了一个在鼠标移动时跟随鼠标 x 和 y 坐标的形状。您可以在此处查看结果:http://codepen.io/anon/pen/qNKgqo 这会很好用,形状位于鼠标光标的中心。不幸的是我有一些
我是一名优秀的程序员,十分优秀!