如何使可拖拽图片上方的下载图标禁止拖拽？

以下是几个可行的解决方案，针对你遇到的拖拽触发问题：

• 给图片本身添加draggable="false"属性
  实际触发拖拽行为的是<li>里的图片元素，而非绝对定位的下载图标<a>。所以直接给图片设置该属性，从根源上禁止拖拽：

  <ul>
    <li>
      <img src="your-image.jpg" draggable="false" alt="图片">
      <a href="download-link" class="Dl" draggable="false">下载图标</a>
    </li>
  </ul>
  

• 在下载图标<a>的mousedown事件中阻止默认行为
  拖拽行为的触发始于鼠标按下（mousedown），在这个阶段阻止默认行为，就能避免后续的拖拽动作：

  document.querySelectorAll('.Dl').forEach(link => {
    link.addEventListener('mousedown', function(e) {
      e.preventDefault();
    });
  });
  

  或者直接在HTML中绑定事件：

  <a href="download-link" class="Dl" onmousedown="return false;">下载图标</a>
  

• 给图片添加ondragstart="return false;"
  直接拦截图片的拖拽开始事件，彻底禁止图片被拖拽：

  <img src="your-image.jpg" ondragstart="return false;" alt="图片">
  

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