So verhindern Sie ein Klickereignis für mouseup-Ereignis

Question

Es ist ein rect auf mousedown mouseup click Ereignis. aber wenn ich das rect mouseup Ereignis klicken dosen`t auslösen https://jsfiddle.net/f0vbc94s/ es mein Code:

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

Ihr click Ereignis wird das Überschreiben des mouseup Ereignis. Wenn Sie auf klicken und die Maus an der unteren Position halten, wird die Farbe mousedown Ereignis Feuer und geändert. Wenn Sie die Maustaste loslassen, mouseup Ereignis ausgelöst, änderte die Farbe und dann click Ereignis sofort ausgelöst und die Farbe geändert. Du konntest es also nicht erkennen.

Wenn Sie das Ereignis click kommentieren, können Sie das Ereignis mouseup ausgelöst sehen.

die Sie interessieren,

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