Question

所有

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

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

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

我是如何尝试将事件处理程序与圈子和输入按钮相关联的？

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

问题是，click元素的#destination事件侦听器仅在单击时调用change函数。换句话说，拖放元素时不会触发change函数，因为没有触发任何单击事件。因此，activeShape函数中定义的change变量不会指向元素，因为永远不会调用change函数。

另一种方法是使用:last-child pseudo class选择#destination元素的最后一个子元素。最后一个子节点始终是附加的最后一个元素，这意味着在更改高度时，您始终会将最近删除的元素作为目标。

Updated Example

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

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

阅读评论后：

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

Updated Example

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

它看起来很不寻常，但您应该在做出更改后移出输入或使用向上/向下键向＆＃34;赶上＆＃34;输入变化。一般来说，它需要某种web.config。在现代浏览器中，onblur事件最适合这种情况。

oninput - 仅在关注之后
onchange - 与onchange相同，但不需要模糊焦点
oninput -

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

拖放后改变高度

2 个答案: