Question

var contain = document.getElementById("contain");
var newBlock = document.createElement("div");
var moveIt = function(event) {
  //document.body.appendChild(newBlock);
  contain.appendChild(newBlock); //comment this out, and apply previous line
  newBlock.className = "block";
    var posX = event.clientX - 50;
  var posY = event.clientY - 50;
  newBlock.style.top = posY + "px";
  newBlock.style.left = posX + "px";
  newBlock.innerHTML = "posX = " + (posX + 50) + "<br />posY = " + (posY + 50);
}

var letsDoIt = contain.addEventListener("mousemove", moveIt);

* {
  margin: 0;
  padding: 0;
}

#contain {
  width: 700px;
  height: 400px;
  background-color: yellow;
  border: 1px solid blue;
}

.block {
  width: 100px;
  height: 100px;
  background-color: red;
  border: 1px solid blue;
  position: absolute;
}

<body>
  <div id="contain">
  </div>
</body>

我刚开始使用javascript。我还没有进入jquery，所以我会感激纯粹的JS答案（如果可能的话）。

我想通过不同的鼠标事件在另一个div区域“内部”创建一个div，但我有以下问题。

如果新div（块）是容器div的子节点，那么每当我按下block时，它都会改变位置，即使这个位置在容器外面。当使用事件“mousemove”时，它将在任何地方移动块。

如果block是body的子元素，那么当在容器内但在块外部按下时，将创建新块。

这是小提琴：jsfiddle

在javascript中限制容器内的鼠标事件

0 个答案: