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：

如果事件侦听器已在所选元素上注册了相同类型，则在添加新侦听器之前将删除现有侦听器。要为同一事件类型注册多个侦听器，该类型后面可以跟一个可选的命名空间，例如“click.foo”和“click.bar”。该类型的第一部分（例如“click”）用于注册事件监听器（使用element.addEventListener（）），并在所选元素上添加方法__onclick.foo和__onclick.bar。要删除侦听器，请将null作为侦听器传递。要删除特定事件类型的所有侦听器，请将null作为侦听器传递，将.type作为类型传递，例如selection.on（“。foo”，null）。

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

d3 stopPropagation - “mousedown.log”

1 个答案: