Javascript 拖放后更改高度

全部,

我有一个圆圈，我从上半音拖到下半音。请看小提琴。单击底部的圆圈后，我尝试用输入按钮更改高度。输入按钮位于顶部和底部div之间，使用增量值5

但是，我的事件处理程序在从5增加到10后不会更改高度值

我的目标是允许更改高度，特别是在我在底部和div中放置了一个圆圈，并选择了该圆圈以模拟激活后

我试图将事件处理程序与圆圈和输入按钮关联的方式是否有问题

问题是，目标元素的click事件侦听器仅在单击时调用change函数。换言之，拖放元素时不会触发更改函数，因为没有触发任何单击事件。因此，change函数中定义的activeShape变量不会指向元素，因为从未调用change函数

另一种方法是使用。最后一个子元素始终是附加的最后一个元素，这意味着您在更改高度时将始终以最近删除的元素为目标

阅读您的评论后：

除了上面的更改之外，您似乎还在寻找更改事件，而不是更改事件。当元素的值更改时，将同步激发输入事件，而当焦点从该字段移除时，将在模糊时激发

---

这看起来很不寻常，但您应该在进行更改后移出输入，或者使用向上/向下键来跟踪输入更改。总的来说，这是需要的。在现代浏览器中，对于这种情况，oninput事件是更好的选择

onchange-仅在调出焦点后 oninput-与onchange相同，但不需要模糊焦点 关于财产变更-

---

只要将HTML中的onchange更改为oninput，您的问题就会得到解决。

Josh，非常感谢您的快速响应！然而，在将输入从5增加到10到15…等之后，圆的高度仍然没有改变。尤其是当你试图瞄准最后一个孩子的时候。奇怪的是，在您更改增量值后，将鼠标悬停在底部div上，然后圆的高度会发生变化。@M_devera-然后您似乎想要输入事件。我更新了我的答案，下面是一个更新的示例->

destinationContainer.addEventListener("click", change);

function change(event) {
  activeShape = event.srcElement;
}

function changeHeight(event) {
  //var height = (parseInt(activeShape.clientHeight, 10) +        parseInt(event.target.value, 10)) + "px";
  activeShape.style.height = event.target.value + "px";
}

function changeHeight(event) {
  var activeShape = destinationContainer.querySelector(':last-child');

  if (activeShape !== null) {
    activeShape.style.height = event.target.value + "px";
  }
}

var destinationContainer = document.querySelector("#destination");
var input = document.querySelector('#height-input');

input.addEventListener('input', function (event) {
  var activeShape = destinationContainer.querySelector(':last-child');

  if (activeShape !== null) {
    activeShape.style.height = event.target.value + "px";
  }
});