Javascript 如何在多个层中捕获鼠标事件?
现在我正努力解决一个问题。请看下面显示的代码,我想实现两个功能,一个是在容器中缩放(即缩放容器中的所有节点),第二个是在鼠标悬停时提醒容器中节点的id 但是,当我将rect的“pointer event”的值设置为all时,缩放效果很好,但是节点无法捕获mouseover事件。当我将该值设置为“none”时,节点可以捕获mouseover事件,但缩放不起作用。似乎“节点”和“rect”位于不同的层中,因此无法同时捕获事件 有人知道怎么解决这个问题吗?提前谢谢Javascript 如何在多个层中捕获鼠标事件?,javascript,d3.js,pointer-events,Javascript,D3.js,Pointer Events,现在我正努力解决一个问题。请看下面显示的代码,我想实现两个功能,一个是在容器中缩放(即缩放容器中的所有节点),第二个是在鼠标悬停时提醒容器中节点的id 但是,当我将rect的“pointer event”的值设置为all时,缩放效果很好,但是节点无法捕获mouseover事件。当我将该值设置为“none”时,节点可以捕获mouseover事件,但缩放不起作用。似乎“节点”和“rect”位于不同的层中,因此无法同时捕获事件 有人知道怎么解决这个问题吗?提前谢谢 var zoom = d3.
var zoom = d3.behavior.zoom()
.scaleExtent([0.1, 10])
.on("zoom", zoomed);
function zoomed() {
container.attr("transform", "translate(" + d3.event.translate +")scale(" + d3.event.scale +")");
}
var container = svg.append("g");
var rect = svg.append("rect")
.attr("width", width/2)
.attr("height", height)
.style("fill", "none")
.style("pointer-events", "all")
.call(zoom);
var node = container.append("g")
.attr("class", "nodes")
.selectAll(".node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.attr("id",function(d){return d.userID});
node.on("mouseover", function(d) {
alert(d.userID);
});
问题是,您正在将container div追加到背景矩形之前。在这种情况下,鼠标事件的目标将是矩形,因为容器组和节点位于该元素下面。试试这个代码
var zoom = d3.behavior.zoom()
.scaleExtent([0.1, 10])
.on("zoom", zoomed);
function zoomed() {
container.attr("transform", "translate(" + d3.event.translate +")scale(" + d3.event.scale +")");
}
var rect = svg.append("rect") //Append background rect first
.attr("width", width/2)
.attr("height", height)
.style("fill", "none")
.style("pointer-events", "all")
.call(zoom);
var container = svg.append("g"); //Then append the container group
var node = container.append("g")
.attr("class", "nodes")
.selectAll(".node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.attr("id",function(d){return d.userID});
node.on("mouseover", function(d) {
alert(d.userID);
});