点击旁边弹出div绝对位置
Pop up div with absolute position next to click
我正在尝试右键单击导致 div 弹出窗口。但是,点击将在铯 window 内,如果它具有绝对位置,它只会让 div 显示。是否可以用绝对位置编辑 div 的弹出位置?
现在,我的代码如下所示:
var editHandler = newCesium.ScreenSpaceEventHandler(scene.canvas);
editHandlersetInputAction(function(e){
var shapeEditMenu = document.getElementById("shapeEditMenu");
shapeEditMenu.style.display = "block";
shapeEditMenu.style.left = e.clientX;
shapeEditMenu.style.top = e.clientY;
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
#shapeEditMenu {
position: absolute;
display: none:
top: 80px;
height: 50px;
width: 80px;
}
<div id="shapeEditMenu">
Line thickness:
<input type="number"> pt
</div>
它在这里不起作用,因为没有铯,但在我的实际代码中发生的是 div 在右键单击时弹出,但总是在相同的位置,而不是在右键点击的地方。
如评论中所述,此处存在一些 API 混乱。 clientX
是浏览器原生 API 的一部分,而不是 Cesium 的 API。由于您使用的是 Cesium 的事件处理系统,因此您可以从中获取事件 API。在这种情况下,您将使用 e.position.x
并在其后使用 + 'px'
来指示样式表的 CSS 像素单位。
还有你这里有几个错别字:
newCesium.
应该是 new Cesium.
editHandlersetInputAction
应该是 editHandler.setInputAction
display: none:
应该是 display: none;
这是一个 live Sandcastle demo,它显示鼠标所在位置的右键单击 "Testing" 菜单。
var viewer = new Cesium.Viewer('cesiumContainer');
var editHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
editHandler.setInputAction(function(e) {
var shapeEditMenu = document.getElementById("toolbar");
shapeEditMenu.textContent = 'Testing';
shapeEditMenu.style.display = "block";
shapeEditMenu.style.left = e.position.x + 'px';
shapeEditMenu.style.top = e.position.y + 'px';
shapeEditMenu.style.background = 'rgba(42, 42, 42, 0.8)';
shapeEditMenu.style.border = '1px solid #888';
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
editHandler.setInputAction(function(e) {
var shapeEditMenu = document.getElementById("toolbar");
shapeEditMenu.style.display = "none";
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
我正在尝试右键单击导致 div 弹出窗口。但是,点击将在铯 window 内,如果它具有绝对位置,它只会让 div 显示。是否可以用绝对位置编辑 div 的弹出位置?
现在,我的代码如下所示:
var editHandler = newCesium.ScreenSpaceEventHandler(scene.canvas);
editHandlersetInputAction(function(e){
var shapeEditMenu = document.getElementById("shapeEditMenu");
shapeEditMenu.style.display = "block";
shapeEditMenu.style.left = e.clientX;
shapeEditMenu.style.top = e.clientY;
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
#shapeEditMenu {
position: absolute;
display: none:
top: 80px;
height: 50px;
width: 80px;
}
<div id="shapeEditMenu">
Line thickness:
<input type="number"> pt
</div>
它在这里不起作用,因为没有铯,但在我的实际代码中发生的是 div 在右键单击时弹出,但总是在相同的位置,而不是在右键点击的地方。
如评论中所述,此处存在一些 API 混乱。 clientX
是浏览器原生 API 的一部分,而不是 Cesium 的 API。由于您使用的是 Cesium 的事件处理系统,因此您可以从中获取事件 API。在这种情况下,您将使用 e.position.x
并在其后使用 + 'px'
来指示样式表的 CSS 像素单位。
还有你这里有几个错别字:
newCesium.
应该是new Cesium.
editHandlersetInputAction
应该是editHandler.setInputAction
display: none:
应该是display: none;
这是一个 live Sandcastle demo,它显示鼠标所在位置的右键单击 "Testing" 菜单。
var viewer = new Cesium.Viewer('cesiumContainer');
var editHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
editHandler.setInputAction(function(e) {
var shapeEditMenu = document.getElementById("toolbar");
shapeEditMenu.textContent = 'Testing';
shapeEditMenu.style.display = "block";
shapeEditMenu.style.left = e.position.x + 'px';
shapeEditMenu.style.top = e.position.y + 'px';
shapeEditMenu.style.background = 'rgba(42, 42, 42, 0.8)';
shapeEditMenu.style.border = '1px solid #888';
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
editHandler.setInputAction(function(e) {
var shapeEditMenu = document.getElementById("toolbar");
shapeEditMenu.style.display = "none";
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);