时间戳

首页 > 解决方案 > 在点击旁边弹出具有绝对位置的div

javascript - 在点击旁边弹出具有绝对位置的div

问题描述

我正在尝试右键单击导致 div 弹出。但是，单击将在 cesium 窗口内，该窗口仅让 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 在右键单击时弹出，但始终位于同一位置，而不是在您右键单击的位置。

标签： javascripthtmlcesium

解决方案

正如评论中提到的，这里发生了一些 API 混淆。 clientX是浏览器原生 API 的一部分，而不是 Cesium 的 API。由于您使用的是 Cesium 的事件处理系统，因此您可以从该 API 获取事件。在这种情况下，您将使用e.position.x并在其后加上 a+ 'px'来指示样式表的 CSS 像素单位。

你这里还有一些错别字：

  • newCesium.应该new Cesium.
  • editHandlersetInputAction应该editHandler.setInputAction
  • display: none:应该display: none;

这是一个实时的 Sandcastle 演示，它显示了一个右键单击“测试”菜单出现在鼠标位置。

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);

推荐阅读