我正在使用 D3 选择语句从 2 个不同的脚本访问 HTML 日期输入。
但是,只有最后一个脚本能够访问日期,而不是之前的脚本。下面的代码描述了我的问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
From <input id="dateFrom" type="date" > To <input id="dateTo" type="date"><input id="submit" type="submit" value="Send Request">
<script src="https://d3js.org/d3.v4.js"></script>
<script type="text/javascript">
var data=[{"time":new Date('Tue Jan 30 2018 01:58:57 GMT+0100 (CET)'),"value":1},{"time":new Date('Wed Jan 31 2018 01:58:57 GMT+0100 (CET)'),"value":1}
,{"time":new Date('Thu Feb 01 2018 01:58:57 GMT+0100 (CET)'),"value":1},{"time":new Date('Fri Feb 02 2018 01:58:57 GMT+0100 (CET)'),"value":1},{"time":new Date('Sat Feb 03 2018 01:58:57 GMT+0100 (CET)'),"value":1}
,{"time":new Date('Sun Feb 04 2018 01:58:57 GMT+0100 (CET)'),"value":1},{"time":new Date(' Mon Feb 05 2018 01:58:57 GMT+0100 (CET)'),"value":1}];
var dateF;
var dateT;
d3.select('#dateFrom')
.on('input',function()
{
dateF = new Date(d3.select('#dateFrom').property('value'))
});
d3.select('#dateTo')
.on('input',function()
{
dateT = new Date(d3.select('#dateTo').property('value'))
});
</script>
<script type="text/javascript">
var dataFiltered1;
d3.select('#submit')
.on('click',function(){
dataFiltered1=data.filter(function(d){
return d.time>=dateF && d.time<=dateT;
});
console.log(dataFiltered1);
});
</script>
<script type="text/javascript">
var dataFiltered2;
d3.select('#submit')
.on('click',function(){
dataFiltered2=data.filter(function(d){
return d.time>=dateF && d.time<=dateT;
});
console.log(dataFiltered2);
});
</script>
<script src="https://d3js.org/d3.v4.js"></script>
</body>
</html>
您会观察到最后一个脚本中只有 dataFiltered2
会被记录到控制台,而 dataFiltered1
将不会接收日期输入,因此将是 undefined
.
最佳答案
这是预期的行为。第二个脚本添加了一个新的事件监听器,它覆盖了第一个。
API对此很清楚:
selection.on(typenames[, listener[, capture]])
Adds or removes a listener to each selected element for the specified event typenames [...] The optional name allows multiple callbacks to be registered to receive events of the same type, such as
click.foo
andclick.bar
. (emphasis mine)
看看这个演示,其中两个脚本将监听器添加到相同的元素:
<script src="https://d3js.org/d3.v4.js"></script>
<input type="text" id="date">
<input id="submit" type="submit" value="Send Request">
<script>
//this is script 1
var foo;
d3.select("#date").on("input.foo", function() {
foo = this.value
})
d3.select('#submit').on('click.foo', function() {
console.log("foo: " + foo);
});
</script>
<script>
//this is script 2
var baz;
d3.select("#date").on("input.baz", function() {
baz = this.value
})
d3.select('#submit').on('click.baz', function() {
console.log("baz: " + baz);
});
</script>
请注意每个事件都有不同的类型名称。
关于javascript - 两个脚本将不同的监听器添加到同一元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48512667/