如何在拖动水平滚动条时禁用<a> 锚点元素的默认拖拽行为

可以仅通过HTML和CSS实现该需求，无需引入JS，适配绝大多数邮件客户端：

核心方案 #

• 给外层<a>标签添加原生HTML属性draggable="false"，直接禁用锚点元素的默认拖拽行为，该属性是HTML原生规范，无额外依赖。
• 补充CSS规则做内核兼容，避免部分webkit内核的邮件客户端依旧触发拖拽逻辑。

修改后代码示例 #

HTML

<a href="http://example.com" draggable="false">
  <div>
    <table>
      <tr>
        <th>Header1</th>
        <th>Header2</th>
        <th>Header3</th>
        <th>Header4</th>
        <th>Header5</th>
        <th>Header6</th>
      </tr>
      <tr>
        <td>Data1</td>
        <td>Data2</td>
        <td>Data3</td>
        <td>Data4</td>
        <td>Data5</td>
        <td>Data6</td>
      </tr>
    </table>
  </div>
</a>

CSS

div {
  width: 200px;
  overflow-x: auto;
}
a {
  -webkit-user-drag: none;
  user-drag: none;
}

兼容性说明 #

以上属性覆盖绝大多数主流邮件客户端，包括桌面端Outlook、苹果邮件，移动端各类系统邮件、Gmail客户端、微信内嵌邮件等，不会影响原有点击跳转逻辑，也不会破坏div的水平滚动效果。

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