d3 stopPropagation - "mousedown.log"

Question

我正在学习 d3，我遇到了一个讨论 stopPropagation() 的先前主题。 jasondavies 在此处发布了对问题的回复和示例 https://gist.github.com/jasondavies/3186840。

在这个例子中他使用：

    .on("mousedown", function() { d3.event.stopPropagation(); })
    .on("mousedown.log", log("mousedown circle"))

我不明白这个事件 "mousedown.log" 以及它在这个例子中是如何触发的。

这是来自 jasondavies 示例的完整代码：

<!DOCTYPE html>
<style>
  circle { fill: lightgreen; stroke: #000; }
</style>
<body>
<script src="http://d3js.org/d3.v2.min.js"></script>
<script>
var svg = d3.select("body").append("svg")
    .style("float", "left")
    .attr("width", 480)
    .attr("height", 480)
    .on("mousedown", log("mousedown svg"))
    .on("mouseup", log("mouseup svg"))
    .on("click", log("click svg"));

svg.append("circle")
    .attr("cx", 240)
    .attr("cy", 240)
    .attr("r", 200)
    .on("mousedown", function() { d3.event.stopPropagation(); })
    .on("mousedown.log", log("mousedown circle"))
    .on("mouseup", log("mouseup circle"))
    .on("click", log("click circle"))

var div = d3.select("body").append("div")
    .style("float", "left")

function log(message) {
  return function() {
    div.append("p")
        .text(message)
        .style("background", "#ff0")
      .transition()
        .duration(2500)
        .style("opacity", 1e-6)
        .remove();
  };
}
</script>

Answer 1

这是事件的命名空间。见 the documentation:

If an event listener was already registered for the same type on the selected element, the existing listener is removed before the new listener is added. To register multiple listeners for the same event type, the type may be followed by an optional namespace, such as "click.foo" and "click.bar". The first part of the type ("click" for example) is used to register the event listener (using element.addEventListener()) and methods are added on the selected elements as __onclick.foo and __onclick.bar. To remove a listener, pass null as the listener. To remove all listeners for a particular event type, pass null as the listener, and .type as the type, e.g. selection.on(".foo", null).

在此特定示例中，这意味着当 mousedown 事件发生时会调用两个处理程序。如果没有命名空间，第二个处理程序将覆盖第一个。

d3 stopPropagation - "mousedown.log"

d3 stopPropagation - "mousedown.log"

javascript

dom-events

d3.js