在我的页面上,我使用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,并且不会被任何canvas或svg元素遮挡,但它们会停止检测任何鼠标事件。
d3应该只是在画布上激活鼠标事件,对吗?是否有一些d3魔法正在接管整个页面上的鼠标?例如,d3在体内插入此div:
编辑:如果您想了解我的意思,请转到此链接:
http://korhal.andrewmao.net:9294/#/sources/APH10154043
左上角有一个小图标,可以在悬停时改变颜色。这是带有鼠标事件的那个;它应该显示一条消息。页面加载后,它将停止工作。如果你想看到它工作,只需重新加载页面并在你的调试器中禁用JSONP调用,这会阻止设置d3的函数执行。
答案 0 :(得分:0)
这里发生的事实上与d3无关。在加载我的Spine应用程序期间,我似乎无意中两次调用@render
,当附加视图时,使所有元素从其事件中解除绑定。
重新绑定可以通过调用@delegateEvents(@events)
然后调用@refreshElements
来完成,但在这种情况下,最好还是修复多余的@render
调用。
与骨干有关的问题:Why Backbone events on replacing html does not work?