D3 v4 click on elements that are dragable

Question

I've created a force graph with DOM items rather then nodes but now I'd like to be able to click on them to for exemple center the one that I click on. The whole graph is dragable but as long as the drag is implied, I'm unable to click on the elements that are dragable, if I comment the drag functionalities I can click just fine.

In this example everything moves but the alert() doesn't get triggered placed on the image element. If I remove drag from the newNode element the alert() gets triggered.

function restart() {
                //If there were already created nodes, remove them
                if (created) {
                    created.remove();
                }

                // Apply the general update pattern to the nodes.
                node = node.data(self.nodes(), function(d) { return d.id; });

                //Add a group
                //When dragged you're not able to click on anything
                var newNode = node.enter().append("g").attr("class", "node").attr("transform", "translate(-42,-55)").call(d3.drag()
                         .on("start", dragstarted)
                         .on("drag", dragged)
                         .on("end", dragended));

                //Add background rect
                nodeSquare = newNode.append("rect")
                .attr("width", "84px")
                .attr("height", "110px")
                .style("fill", 'red');

                //Add an image
                imageNode = newNode.append("image")
                      .attr("xlink:href", function (d) { return d.imageUrl; })
                      .attr("transform", "translate(2,2)")
                      .attr("height", 80)
                      .attr("width", 80);

                imageNode.on("click", function (d) { alert("center me!"); d3.event.stopPropagation();});
                 //TODO: ALIGN CENTER
                //.attr("x", function(d){ if(d.name == self.entityData.properties.Title) return 0;}).attr("y", function(d){ if(d.name == self.entityData.properties.Title) return 0;})

                //Add text
                nodeText = newNode.append("a")
                    .attr("width", 2)
                    .attr("word-wrap", "break-word")
                    .attr("height", 10)
                    .attr("href", function (d) { if (d.href) return d.href; else return "https://i.ytimg.com/vi/jhvAXT9R_3U/hqdefault.jpg"; })
                    .style('stroke', 'white')
                    .append("text").text(function (d) { return d.name.substring(0, 10); }).attr("dy", function (d) { return +100 }).attr("dx", function (d) { return +10; });
                //Change the text style to be less thick
                nodeText.style("stroke-width", 0.5).style("font-size", "12px");

                //save the created nodes to be able to delete them as soon as this function is called upon again
                created = newNode;

                // Apply the general update pattern to the links.
                link = link.data(self.links());
                link.exit().remove();
                link = link.enter().append("line").merge(link);

                // Update and restart the simulation.
                simulation.nodes(self.nodes());
                simulation.force("link").links(self.links());
                simulation.alpha(1).restart();
            }

Answer 1

The root cause is d3-drag uses 'mounsemove' event to trigger 'drag' event. But in Chrome on Windows, a 'mousemove' event is always triggered even just click a node. So click event was stopped by d3-drag (see its document: https://github.com/search?utf8=%E2%9C%93&q=d3-drag )

It's a bug of Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=161464 which was created in Nov, 2012 but marked 'fixed' on Jan 30, 2017. So I checked Chrome version and really found an update. After I updated Chrome to version 56.0, the bug was gone... It's amazing that the bug got a fix in 4 years.

However, let's wish people will update their Chrome in time.