mouseupイベントのクリックイベントを防ぐ方法

Question

mousedown mouseup clickイベントにrectがあります。私はRECTのMouseUpイベントがhttps://jsfiddle.net/f0vbc94s/ そこをトリガーdosen`tクリックしたときに私のコードは次のとおりです。

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