使用D3.js为SVG绑定mousedown事件不触发是什么原因？

首先明确结论：SVG标签本身完全支持mousedown等所有标准鼠标事件，你遇到的问题属于代码配置或页面布局层面的错误，和SVG本身的特性无关。

常见原因及排查方案 #

• 上层元素拦截事件
  如果有其他DOM元素（比如透明的遮罩层、父级容器的伪元素等）覆盖在SVG节点上方，且该元素单独绑定了mousedown事件并调用了event.stopPropagation()或event.preventDefault()，但没有对click事件做拦截处理，就会出现click可以透传到SVG、但mousedown被拦截的情况。可以打开浏览器开发者工具的元素选择器，点击SVG区域确认选中的是不是目标SVG节点即可验证。
• d3版本适配问题
  d3 v6版本对事件传递逻辑做了 break change：
  • v6及以上版本：事件回调第一个参数为事件对象，你的现有写法是兼容的
  • v5及更早版本：事件回调第一个参数为绑定的节点数据，事件对象需要从全局的d3.event获取，同时箭头函数会丢失d3绑定的this指向，建议替换为普通函数做兼容：

  d3.select(svg)
    .on("mousedown", function (_, d) {
      const event = d3.event
      setRectPoint(event, gContainer)
    })
    .on("mousemove", function (_, d) {
      const event = d3.event
      drawRectOutline(event, gContainer)
    })
  

• 事件被重复绑定覆盖
  检查后续代码中是否有对同一个SVG节点重复绑定mousedown事件的逻辑，d3的on方法对同一个事件名重复绑定会覆盖之前的回调，如果后续有d3.select(svg).on('mousedown', null)之类的清除逻辑也会导致之前的绑定失效。
• pointer-events属性配置错误
  检查SVG节点及其子节点的pointer-eventsCSS属性，如果子节点设置了pointer-events: none且填充了整个SVG区域，同时SVG本身没有设置背景色，可能会出现鼠标事件无法命中的问题，给SVG加一个临时的背景色background: rgba(255,0,0,0.1)即可验证是否是命中区域的问题。

内容的提问来源于stack exchange，提问作者Андрей Мельник