DOM 이벤트 전파 중지(stopPropagation)

8937 단어 d3.js자바스크립트domSVG
안녕하세요.
d3.js에서 svg의 DOM 이벤트 전파를 멈추는 동작 예 (아래)를 찾았으므로 움직여 보았습니다. 녹색 원은 circle 만 마우스 클릭 이벤트를 수신하고 svg에 도달하지 못한다는 것을 오른쪽에 표시합니다.
  • "stopPropagation "(Jason Davies’s Block)



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

svg.append("circle")
    .style("fill", "lightgreen")
    .attr("cx", 200)
    .attr("cy", 80)
    .attr("r", 60)
    .on("click", function() { d3.event.stopPropagation(); })
    .on("click.foo", log("click circle"))  // namespacing for events

svg.append("circle")
    .style("fill", "lightblue")
    .attr("cx", 200)
    .attr("cy", 240)
    .attr("r", 60)
    .on("click.foo", log("click circle"))

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

function log(message) {
  return function() {
    divlog.append("p")
        .text(message)
        .style("background", "#ff0")
      .transition()
        .duration(2500)
        .style("opacity", 1e-6)
        .remove();
  };
}
</script>
    D3의 React 프로젝트에서 사용하는 방법 ~ 그 1 ~
    D3.js에서 흉상 크기를 원형 차트로 나타내는 "유방 차트"를 만듭니다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage