Question

我正在制作一个基本程序，它使用滑块在页面周围移动矩形。我可以使用

之类的东西来设置滑块

<input type = "range" min = "5" max = "500"  value = "5" id = "xvalue" >

然后用

引用滑块的值

d3.select("#xvalue").on("input", function() {
  update(+this.value, "x");
});

其中update（）是一个改变矩形位置的函数。

当滑块的值发生变化时，事件侦听器会触发。但是，在我看来，当滑块的“max”和“min”属性发生变化时，事件监听器也会触发。

如何确保只在输入对象的“value”属性发生更改而不是任何其他属性时才触发事件侦听器？

Answer 1

在我看来，更改“min”或“max”不会触发事件。例如，我就像你一样：

d3.select("#xvalue").on("input", function() {
    console.log("The value is " + this.value);
});

然后我创建了两个按钮，一个将最小值设置为30，另一个将其设置为5：

d3.select("#button1").on("click", function(){
    document.getElementById("xvalue").setAttribute("min", 30);
});

d3.select("#button2").on("click", function(){
    document.getElementById("xvalue").setAttribute("min", 5);
});

我点击了按钮，但它没有触发听众，只是改变了“min”值。当我单击另一个按钮后，我可以看到滑块移动，但控制台中没有记录任何内容。

如何在d3.js中自定义事件监听器？

1 个答案: