На моей странице есть несколько событий, определенных с помощью событий контроллера 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-индекс и не скрыты никакими элементами холста или svg, но они перестают обнаруживать любые события мыши.
d3 должен активировать только события мыши на холсте, верно? Происходит ли какая-то магия d3, которая захватывает мышь на всей странице? Например, d3 вставляет этот div в тело:
EDIT: если вы хотите понять, что я имею в виду, перейдите по этой ссылке:
http://korhal.andrewmao.net:9294/#/sources/APH10154043
В левом верхнем углу есть маленькая иконка, которая меняет цвет при наведении. Это тот, который связан с событиями мыши; он должен отображать сообщение. Как только страница загружается, она перестает работать. Если вы хотите увидеть, как это работает, просто перезагрузите страницу и отключите вызов JSONP в отладчике, что предотвратит выполнение функции, устанавливающей d3.
