如何阻止<svg>内部的<image>元素触发浏览器默认拖拽行为？

你之前尝试的方案无效是因为draggable属性、ondragstart事件都是HTML标准下的API，SVG元素本身不支持这些属性和事件，所以无法通过这些方法阻止原生拖拽虚影，以下是两种经过验证的可行方案：

方案1：监听mousedown事件阻止默认行为 #

直接在SVG的image元素的mousedown事件回调中阻止默认行为，就能切断原生拖拽的触发链路，改造成本最低不需要修改DOM结构，代码示例如下：

const svgImg = document.querySelector('svg image')
svgImg.addEventListener('mousedown', e => {
  // 仅阻止左键的默认行为，保留右键、中键的原有交互
  if (e.button === 0) {
    e.preventDefault()
  }
  // 此处可以添加你自己的自定义拖拽初始化逻辑
})

方案2：添加透明rect层拦截交互 #

在image元素上层叠加一个尺寸完全一致的透明rect元素，所有鼠标事件由rect承接，完全隔离image的原生交互，兼容性更好，适合批量处理多个可拖拽SVG元素的场景，代码示例如下：

<svg>
  <g class="drag-item">
    <image href="你的图片地址" width="图片宽度" height="图片高度"></image>
    <rect 
      width="图片宽度" 
      height="图片高度" 
      fill="transparent" 
      style="pointer-events: all"
    ></rect>
  </g>
</svg>

后续自定义拖拽逻辑直接绑定到外层的g元素或者rect元素即可，不会触发任何image原生的拖拽效果。

内容的提问来源于stack exchange，提问作者Pepijn