拖放后更改高度

Question

所有，

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

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

我的目标是允许更改高度，尤其是在我在底部和div中放下一个圆并选择了该圆以模拟激活之后。

我尝试将事件处理程序与圆和输入按钮相关联的方式有问题吗？

https://jsfiddle.net/mdevera/ff1bfpsd/

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";
}

Answer 1

问题在于， #destination元素的click事件侦听器仅在单击change函数时才调用它。 换句话说，由于没有触发任何点击事件，因此在您拖放元素时不会触发change函数。 结果，由于从未调用过change函数，因此change函数中定义的activeShape变量不会指向元素。

另一种方法是使用:last-child伪类选择#destination元素的最后一个子元素。 最后一个子元素总是附加的最后一个元素，这意味着更改高度时，您始终将最近放置的元素作为目标。

更新示例

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

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

---

阅读您的评论后：

除了上述更改之外，您似乎还在寻找input事件而不是change事件。 更改元素的值时，将同时触发input事件，而change事件是在blur时触发的（即，从该字段移除焦点时）。

更新示例

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

Answer 2

这看起来很不正常，但是您应在进行更改后将其移出输入，或使用上/下键“赶上”输入更改。 总的来说，这需要某种onblur 。 在现代浏览器中， oninput事件是这种情况的首选。

• onchange -仅在聚焦之后
• oninput与onchange相同，但不需要模糊焦点
• onpropertychange -

只需将HTML中的onchange更改为oninput解决您的问题。