如何避免Android端悬停SVG图片时弹出下载对话框？

可以通过几种方式阻止这个默认行为，核心是不让浏览器把SVG识别为可长按下载的图片元素：

• 阻止上下文菜单事件
  用JavaScript监听SVG的contextmenu事件并阻止默认行为，直接干掉长按弹出的菜单（包含下载选项）：

  document.querySelectorAll('.toolbar svg').forEach(svg => {
    svg.addEventListener('contextmenu', e => e.preventDefault());
  });
  

  这里.toolbar是你的工具栏容器类名，根据实际情况调整选择器即可。

• 给SVG套容器转移交互
  把每个SVG放在一个<div>容器里，把hover触发tooltip的逻辑绑定到容器上，同时给SVG设置pointer-events: none，让点击/长按事件落到容器上，而非SVG本身：

  <div class="toolbar-item">
    <svg>你的SVG代码</svg>
    <span class="tooltip">提示内容</span>
  </div>
  

  .toolbar-item {
    position: relative;
    width: 40px;
    height: 40px;
    /* 其他容器样式 */
  }
  .toolbar-item:hover .tooltip {
    /* 你的tooltip显示逻辑，比如： */
    display: block;
    opacity: 1;
    transition: opacity 0.3s delay 0.5s;
  }
  .toolbar-item svg {
    pointer-events: none;
    width: 100%;
    height: 100%;
  }
  

• CSS辅助禁用长按行为
  给SVG添加CSS属性，进一步阻止浏览器的长按交互：

  .toolbar-item svg {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }
  

推荐把第一种和第二种方法结合使用，基本能覆盖绝大多数安卓浏览器的情况，既保留tooltip的hover延迟效果，又不会弹出下载对话框。

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