【问题标题】:How do I stop event propagation in d3 using TypeScript?如何使用 TypeScript 在 d3 中停止事件传播?
【发布时间】:2017-05-27 03:17:13
【问题描述】:

在 JavaScript 中,我有如下代码来在拖动某物时停止事件传播。

var drag = d3.behavior.drag()
  .origin(function(d) {
    return d;
  })
  .on('dragstart', function(e) {
    d3.event.sourceEvent.stopPropagation();
  })
  .on('drag', function(e) { ... });

在 TypeScript 中,我注意到 d3.event.sourceEvent 不存在。下面是对应的 TypeScript 代码。

let drag = d3.behavior.drag()
  .origin( (d, i) => {
    let data = d as any;
    return { x: data.x as number, y: data.y as number };
  })
  .on('dragstart',  (d, i) => { 
    //what to do here
   })
  .on('drag', (d, i) => { ... });

事实上,on 方法签名在 TypeScript 中已经发生了变化。声明文件如下所示。

export module behavior {
 interface Drag<Datum> {
  on(type: string): (d: Datum, i: number) => any;
  on(type: string, listener: (d: Datum, i: number) => any): Drag<Datum>;
 }
}

以下是我与 d3 相关的 npm 依赖项。

  • “@types/d3”:“3.5.37”
  • “d3”:“^3.5.16”

你知道如何在 TypeScript 中做同样的事情吗?

【问题讨论】:

  • 我觉得应该是d3.event.stopPropagation()

标签: javascript d3.js typescript typescript-typings


【解决方案1】:

原来我不得不做一些选角。

let event = d3.event as d3.BaseEvent;
event.sourceEvent.stopPropagation();

【讨论】:

  • 我在使用 Scala.js 时遇到了同样的问题,您的回答帮助我找到了解决方案:d3.event.asInstanceOf[MouseEvent].stopPropagation()
猜你喜欢
  • 2011-01-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-07-10
  • 2013-09-03
  • 1970-01-01
  • 1970-01-01
  • 2023-03-14
相关资源
最近更新 更多