d3 stopPropagation - 「mousedown.log」

我在學習d3，並且遇到了以前討論stopPropagation（）的一個主題。 jasondavies在這裏回覆了這個問題和一個例子https://gist.github.com/jasondavies/3186840。d3 stopPropagation - 「mousedown.log」

在這個例子中，他使用：

.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>

來源

2015-06-25 haydenwagner

它的命名空間的事件。請參見the documentation：

如果在選定元素上已經爲相同類型註冊了事件偵聽器，則在添加新偵聽器之前刪除現有偵聽器。要爲同一事件類型註冊多個偵聽器，該類型後可以跟隨一個可選的名稱空間，如「click.foo」和「click.bar」。類型的第一部分（例如「click」）用於註冊事件偵聽器（使用element.addEventListener（）），並將方法作爲__onclick.foo和__onclick.bar添加到所選元素上。要刪除偵聽器，請將null作爲偵聽器。要刪除特定事件類型的所有偵聽器，請將null作爲偵聽器，並將.type作爲類型傳遞，例如selection.on（「。foo」，null）。

在這個特定的例子中，這意味着兩個處理程序在發生mousedown事件時被調用。沒有命名空間，第二個處理程序會覆蓋第一個。

來源

2015-06-25 16:10:33

d3 stopPropagation - 「mousedown.log」

回答

相關問題