如何防止鼠標事件的點擊事件

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") 
})