在我的页面上,我使用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索引最高,并且不会被任何canvas或svg元素遮盖,但是它们会停止检测任何鼠标事件。
d3应该只激活画布上的鼠标事件,对吗?是否有某种d3魔术正在接管整个页面上的鼠标?例如,d3将此div插入到主体中:
<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9ZNGJjdC5wbmcifQ==” alt =“魔术d3 div?”>
编辑:如果您想了解我的意思,请转到此链接:
http://korhal.andrewmao.net:9294/#/sources/APH10154043
悬停时,左上角有一个小图标会更改颜色。这是带有鼠标事件的事件。它应该显示一条消息。页面加载后,它将停止工作。如果您希望它起作用,则只需重新加载页面并在调试器中禁用JSONP调用即可,这将阻止执行设置d3的函数。
在我的页面上,我使用Spine的控制器事件定义了一些事件。它们使用jQuery的委托分配给选择器,并且工作正常:event:'click #zoom a':'zoom''mouseenter#...
这里发生的事情实际上与d3无关。似乎我在加载Spine应用程序时无意中两次调用了@render
,使所有元素在附加视图时都不受事件约束。