D3 stopPropagation - " mousedown.бревно"
Я изучаю d3 и наткнулся на предыдущую тему, обсуждающую stopPropagation (). jasondavies опубликовал ответ на этот вопрос и пример здесь https://gist.github.com/jasondavies/3186840 .
В этом примере он использует:
.on("mousedown", function() { d3.event.stopPropagation(); })
.on("mousedown.log", log("mousedown circle"))
Я не понимаю события " mousedown.журнал " и как он срабатывает в этом примере.
Вот полный код из примера 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>
1 ответ:
Это пространство имен для событий. Смотрите документацию:
Если прослушиватель событий уже зарегистрирован для того же типа в выбранном элементе, существующий прослушиватель удаляется до добавления нового прослушивателя. Чтобы зарегистрировать несколько прослушивателей для одного и того же типа событий, за типом может следовать необязательное пространство имен, например "click.фу " и " щелк.бар". Первая часть типа (например, "click") используется для регистрации прослушивателя событий (с помощью элемент.addEventListener ()) и методы добавляются к выбранным элементам как _ _ onclick.фу и _ _ онклик.бар. Чтобы удалить прослушиватель, передайте null в качестве прослушивателя. Чтобы удалить все прослушиватели для определенного типа событий, передайте null в качестве прослушивателя, и .тип как тип, например выбор.на(".foo", null).
В данном конкретном примере это означает, что оба обработчика вызываются при возникновении события
mousedown
. Без пространства имен второй обработчик будет перезаписывать первый.