Javascript css溢出：隐藏原因鼠标层&；分层位置不正确
我正在使用VuejsJavascript css溢出：隐藏原因鼠标层&；分层位置不正确,javascript,css,vue.js,overflow,Javascript,Css,Vue.js,Overflow,我正在使用Vuejs@contextmenu.preventapi创建上下文菜单。但是，当单击带有溢出：隐藏样式的元素时，它会导致事件.layerX和事件.layerY处于错误位置 newvue（{ el:“#应用程序”， 数据：{ 菜单样式：{top:'0px'，left:'0px'}， 美诺朋：错 }, 方法：{ onContextMenu（e）{ log（'contextmenuevent'，e） this.menuStyle={ 顶部：${e.layerY}px`， 左：`${e.la
@contextmenu.prevent溢出：隐藏样式的元素时，它会导致事件.layerX
和事件.layerY
处于错误位置
newvue（{
el:“#应用程序”，
数据：{
菜单样式：{top:'0px'，left:'0px'}，
美诺朋：错
},
方法：{
onContextMenu（e）{
log（'contextmenuevent'，e）
this.menuStyle={
顶部：${e.layerY}px`，
左：`${e.layerX}px`
}
this.menuOpen=true
}
}
})
单击我lorem ipsum dolor sit amet
不溢出
这是菜单
关闭
演示：
注意：我正在使用tailwindcss进行样式设置使用e.pageX
和e.pageY
（请参阅）。感谢@tony19，我认为它不存在，因为我只在控制台日志上看到clientX，Y和layerX，Ycontextmenu{target:div.w-20.bg-red-200.truncate.p-2，按钮：2，clientX:272，clientY:88，layerX:272，layerY:88}
clientX
和cllientY
也可以工作。请注意，layerX
和layerY
是非标准API，不建议用于生产。clientX
和clientY
在页面滚动时不起作用，低于屏幕高度的项将具有错误的上下文菜单位置。然后使用pageX
和pageY
<html>
<body>
<div id="app" class="flex items-center justify-center h-screen">
<div
id="item"
class="p-8 bg-green-200 flex items-center"
@contextmenu.prevent="onContextMenu"
>
<div class="w-20 bg-red-200 truncate p-2">
Click me lorem ipsum dolor sit amet
</div>
<div class="non-overflow">Non overflow</div>
</div>
<div
v-if="menuOpen"
id="menu"
:style="menuStyle"
class="bg-white shadow p-4 absolute absolute"
>
this is menu
<button @click="menuOpen = false" class="bg-red-200 p-1">close</button>
</div>
</div>
</body>
</html>