Question

我想创建一个用于绘制形状的聚合物元素。这个元素在当地的dom中有一个画布和一个纸下拉菜单。想法是在画布上使用鼠标绘制，一旦绘制操作完成，下拉菜单将显示在形状旁边，以便可以选择名称。我的主要问题是：如何显示相对于鼠标位置的纸张下拉菜单？

Answer 1

当用户在元素上移动鼠标时，将触发mousemove事件。您可以在用户＆＃34;绘图＆＃34;并跟踪鼠标位置：

＆＃13;

var canvas = document.querySelector('.canvas');
var position = document.querySelector('.position');

canvas.addEventListener('mousemove', function(e) {
  position.innerText =
      'client x: ' + e.clientX +
      ' client y: ' + e.clientY;
});

＆＃13;

.canvas {
  background-color: grey;
  width: 100px;
  height: 100px;
}

＆＃13;

<div class="canvas"></div>
<span class="position"></span>

＆＃13;

用户将以某种方式停止绘图，您可以使用最后一个mousemove事件来确定下拉列表的呈现位置（通过内联绝对定位）。在下面的演示中，＆＃34;下拉＆＃34;在画布内发生单击时出现：

＆＃13;

var canvas = document.querySelector('.canvas');
var position = document.querySelector('.position');
var dropdown = document.querySelector('.dropdown');

var lastPosition = {x: -100, y: -100};

canvas.addEventListener('mousemove', function(e) {
  position.innerText =
      'client x: ' + e.clientX +
      ' client y: ' + e.clientY;
  
  lastPosition.x = e.clientX;
  lastPosition.y = e.clientY;
});

canvas.addEventListener('click', function(e) {
  dropdown.style.left = lastPosition.x + 'px';
  dropdown.style.top = lastPosition.y + 'px';
});

＆＃13;

.canvas {
  background-color: grey;
  width: 100px;
  height: 100px;
}

.dropdown {
  background-color: red;
  height: 40px;
  position: absolute;
  top: -100px;
  left: -100px;
  width: 20px;
}

＆＃13;

<div class="canvas"></div>
<span class="position"></span>
<div class="dropdown"></div>

＆＃13;

显示相对于鼠标位置的本地DOM子项

1 个答案: