如何防止鼠标事件的点击事件

Question

mousedown mouseup click事件中有rect事件。但是当我点击矩形MouseUp事件触发dosen`t https://jsfiddle.net/f0vbc94s/ 有我的代码：

var rect=d3.select(".text").append("rect") 
        .attr("width",1000).attr("height",1000) 
      .style("fill","#00ff00"); 
rect.on("click",function(){ 
     d3.event.preventDefault 
     d3.select(this).style("fill","#000000") 
}) 
.on("mousedown",function(){ 
     d3.select(this).style("fill","#ff0000") 
}).on("mouseup",function(){ 
     d3.event.preventDefault; 
     d3.select(this).style("fill","#00ff00") 
}) 

Answer 1

你click事件被覆盖mouseup事件。当您单击 并将鼠标放在向下位置时，mousedown事件触发和 更改了颜色。当你释放鼠标，mouseup事件发生， 改变颜色，然后click事件立即发射，并改变 的颜色。所以你无法识别它。

如果您对click事件发表评论，您可以看到mouseup事件被解雇。

试试这个，

var rect=d3.select(".text").append("rect") 
        .attr("width",1000).attr("height",1000) 
      .style("fill","#00ff00"); 
//rect.on("click",function(){ 
     //d3.event.preventDefault 
     //d3.select(this).style("fill","#000000") 
//}) 
rect.on("mousedown",function(){ 
     d3.select(this).style("fill","#ff0000") 
}).on("mouseup",function(){ 
     d3.event.preventDefault; 
     d3.select(this).style("fill","#00ff00") 
})