1

在我的页面上，我使用 Spine 的控制器事件定义了一些事件。使用 jQuery 的委托将它们分配给选择器，并且它们工作正常：

events:
  'click #zoom a': 'zoom'
  'mouseenter #zoom a': -> $("#yZoom_help").show()
  'mouseleave #zoom a': -> $("#yZoom_help").delay(1600).fadeOut 1600

在稍后的某个时间点异步地，我用 d3 设置了一些东西。具体来说，我正在画布、一堆轴等上设置缩放行为。

@x_scale = d3.scale.linear() 
  .domain([@lcData.start, @lcData.end])
  .range([0, @width])    
@y_scale = d3.scale.linear()
  .domain([@lcData.ymin, @lcData.ymax])
  .range([@h_graph, 0])

@zoom_graph = d3.behavior.zoom()
  .x(@x_scale)
  .scaleExtent([1, @max_zoom])
  .on("zoom", @graph_zoom)

@canvas = d3.select("#graph_canvas")   
  .attr("width", @width)
  .attr("height", @h_graph)
  .call(@zoom_graph)
  .node().getContext("2d")     

# ... some other things left out

问题是，在我完成这个 d3 设置之后，非 d3 元素上的鼠标事件停止工作。他们根本不工作。这些元素具有最高的 z-index，并且不会被任何画布或 svg 元素遮挡，但它们会停止检测任何鼠标事件。

d3 应该只在画布上激活鼠标事件，对吧？是否有一些 d3 魔法正在接管整个页面上的鼠标？例如，d3 将这个 div 插入正文中：

魔术d3 div？

编辑：如果您想了解我的意思，请转到此链接：

http://korhal.andrewmao.net:9294/#/sources/APH10154043

左上角有一个小图标，当您悬停时会改变颜色。这是带有鼠标事件的那个；它应该显示一条消息。页面加载后，它将停止工作。如果你想看到它工作，只需重新加载页面并在调试器中禁用 JSONP 调用，这会阻止设置 d3 的函数执行。

4

1 回答 1

0

这里发生的事情实际上与d3无关。在加载我的 Spine 应用程序期间，我似乎无意中调用@render了两次，当附加视图时，所有元素都从它们的事件中解脱出来。

可以通过调用来完成重新绑定，但在这种情况下，最好修复多余的@delegateEvents(@events)调用。@refreshElements@render

与主干相关的问题：为什么替换 html 的主干事件不起作用？

于 2012-09-26T17:49:33.867 回答