如果用户在 d3.js 中单击圆形，如何防止拖动？

Question

我有组元素，它有圆形和矩形元素。用户可以拖动组元素，因此矩形和圆形元素都会移动。它运行良好。但如果用户单击圆形元素，我需要防止拖动。JS小提琴const x = 100;var y = 100;var grid = d3.select("#svg-area");var g = grid.append("g")  .attr("transform", `translate(${x},${y})`)  .call(d3.drag()    .on("drag", function() {      var x1 = d3.event.x - 30;      var y1 = d3.event.y - 10;      d3.select(this).attr("transform", "translate(" +        (x1) + "," + (y1) + ")")    }));newNode(g);function newNode(g, text) {  var textWid = 100;  console.log('wid ', textWid);  g.append("rect")    .attr("class", "new-nodes")    .attr("x", '10')    .attr("y", '0')    .attr("rx", '6')    .attr("ry", '6')    .attr("width", textWid)    .attr("height", '35')    .style("fill", "#8c259f")    .style("stroke", "#222")    .style("cursor", "move");  g.append("circle")    .attr("class", "new-nodes")    .attr("cx", '10')    .attr("cy", '17')    .attr("r", '6')    .style("fill", "#dedede")    .style("stroke", "#b2b0b0")    .style("cursor", "pointer")    .on("click", function(d) {      /*             d3.event.preventDefault();                  d3.event.stopPropagation();                   */    });}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script><svg id="svg-area" class="chart-area" width="500" height="500" pointer-events="all" style="cursor: crosshair; touch-action: none;"></svg>