Javascript 如果在IE中的body元素上使用了margin，则Jquery offset不会给出期望值
我正在尝试设置Javascript 如果在IE中的body元素上使用了margin，则Jquery offset不会给出期望值,javascript,jquery,html,css,contextmenu,Javascript,Jquery,Html,Css,Contextmenu,我正在尝试设置上下文菜单的位置，并使用JqueryJquery.ui.position。对于ContextMenu我正在使用此库：- https://swisnl.github.io/jQuery-contextMenu/demo 我正在尝试定位上下文菜单，如下所示：- $(document).ready(function() { $.contextMenu({ selector: 'td[id="tdMenu"]', trigger: 'left',
上下文菜单的位置，并使用JqueryJquery.ui.position
。对于ContextMenu
我正在使用此库：-
https://swisnl.github.io/jQuery-contextMenu/demo
我正在尝试定位上下文菜单
，如下所示：-
$(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" },
}
});
});
<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>
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.
};
}
HTML格式如下：-
$(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" },
}
});
});
<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>
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提供了以下保证金：-
<body style="margin: 0px;">
如果我将删除此边距，它在第一次单击时也会正确计算
我不能去掉身体边缘。解决方法是什么？从您发布的内容来看，这看起来像是在页面完成加载所有样式和内容之前计算<代码>偏移量$(document).ready(function() {
// executes when DOM parser reaches </html> tag
$.contextMenu({/* your stuff here */})
});
注意：上述解决方案将延迟
$.contextMenu（）$。contextMenu$（文档）上初始化它。准备好并在$（窗口）上更新它。加载：
函数cMenu（）{
$.contextMenu({
/*你的东西在这里*/
});
}
$（文档）.ready（cMenu）；
$（窗口）.on（'load'，cMenu）；
实际上，页面中可能只有一个项目会影响偏移量（很可能是样式表）。如果你知道它是哪一个（通过删除、禁用页面中的内容），你甚至不必等待其他内容加载，您只需在元素的onload
事件上绑定函数的重新运行即可。在上下文菜单
事件
显示
之前删除主体样式，并在激活
事件之后重置主体样式
您可以尝试以下方法：
$(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" },
}
});
});
您的页面上有单独的.css
页吗？如果是这样，您是否在.css
的最开始添加了重置代码（即*{margin:0；padding:0}
）？如果不是的话，试试看我会说完全一样的话。您是否正在使用任何规范化或重置css。请这样做，并检查是否有帮助。另外，请确保设置了*{box size:border box}
。如果您提供了一个有效的JSFIDLE，这会有所帮助……否则您的问题是不完整的。罪魁祸首是contextMenu
的这部分位置：函数
。对于第一次单击，只有位置内的偏移量
与文档顶部的偏移量
不同。就绪
。第二次单击时，偏移量正常。主要原因是上下文菜单
的这部分位置：函数
。第一次，只有内部偏移位置与document.ready
顶部的偏移不同。一旦我再次单击，偏移量就可以了。因此我在document.ready计算了偏移量，并将其分配给offset insidegetDimensions
。但这不是一个合适的解决方案。罪魁祸首是contextMenu
的position:function
部分。第一次，只有内部偏移位置与document.ready顶部的偏移不同。一旦我再次单击，偏移量就可以了。我已经试过（'load'），但只有在第一次单击时，偏移量的内部位置不同，而在第二次单击时，偏移量就可以了。因此我在文档中计算了偏移量，并将其分配给偏移量内部getDimensions
。但这是一个解决方案，不是一个合适的解决方案。