在Firefox中显示"ReferenceError:未定义事件"的D3事件 [英] D3 event showing 'ReferenceError: event is not defined' in Firefox
问题描述
我正在d3地图中使用鼠标滚轮缩放.以下代码正在使用.
I am using mouse wheel zoom in my d3 Map.Following Code am using.
.on("wheel.zoom", function() {
var currScale = projection41039.scale();
var newScale = currScale - 1 * event.deltaY;
if (newScale >= 150) {
var currTranslate = projection41039.translate();
var coords = projection41039.invert([event.offsetX, event.offsetY]);
projection41039.scale(newScale);
var newPos = projection41039(coords);
projection41039.translate([currTranslate[0] + (event.offsetX - newPos[0]),
currTranslate[1] + (event.offsetY - newPos[1])
]);
updateContents();
}
})
这在Chrome上正常运行,但在Firefox中引发错误:
This works fine for Chrome, but throws an error in Firefox:
ReferenceError:未定义事件
ReferenceError: event is not defined
推荐答案
The issue here is that Chrome follows the Internet Explorer feature of Window.event, while Firefox doesn't:
例如,给定一个按钮或任何其他元素,以下代码段将在Chrome上运行,但不适用于Firefox:
For instance, given a button or any other element, the following snippet will work on Chrome, but not on Firefox:
d3.select("button").on("click", function() {
console.log(event)
})
在这里尝试: https://jsfiddle.net/b9h4ntn0/(我通常使用堆栈片段,但该代码段将在该特定示例中冻结).
Try it here: https://jsfiddle.net/b9h4ntn0/ (I normally use Stack Snippets, but the snippet will freeze in that particular example)
解决方案
使用d3.event
.这样,您就不必依赖Window.event
:
Use d3.event
. That way, you don't rely on Window.event
:
d3.select("button").on("click", function() {
console.log(d3.event)
})
以下代码在Chrome和Firefox上均可使用: https://jsfiddle.net/qj787zmj/
The following code works both on Chrome and Firefox: https://jsfiddle.net/qj787zmj/
这篇关于在Firefox中显示"ReferenceError:未定义事件"的D3事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!