javascript - 两个脚本将不同的监听器添加到同一元素

标签 javascript html d3.js dom-events

我正在使用 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 and click.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/

相关文章:

javascript - 流明:启用 CORS

javascript - Leaflet.js 从 AJAX 添加层

html - 在 twig/volt 中包含 .css 文件

javascript - 使用 D3 制作没有 mustache 的彩色箱线图

javascript - D3.js - 动态改变序数比例

javascript - Meteor-App : Tracker is not defined

javascript - 为非常基本的 jquery 轮播添加字幕

html - 如何在div内对齐英文阿拉伯文文本?

html - 在移动其他 DIV 的位置之前将 DIV 的大小调整为最小值

javascript - 如何移动 d3 AlbersUSA 投影中的状态?