如何让伪装成button的div双击时不选中内容？

浏览器确实对原生<button>做了开发者工具无法直接观测到的内核级特殊处理，这就是你没法用CSS或常规JS完全复刻其文本选择行为的核心原因。

核心原因：原生button的选择逻辑是硬编码在渲染引擎里的 #

浏览器对<button>元素的文本选择规则是专门定制的：

• 双击时会直接阻止文本选中行为
• 但保留全局全选（Ctrl+A）的可选中性
  这种规则不属于CSS属性的控制范畴，appearance: button只能模拟按钮的外观样式，完全触及不到内核层面的行为逻辑，所以没用。

用JS实现近似原生button的文本选择行为 #

要实现「双击不选内容，但Ctrl+A能选中」的效果，不能用user-select: none（会完全禁用所有选择），可以通过事件监听来精准控制：

1. 监听双击事件，阻止默认选中并清除已选内容

const fakeButton = document.querySelector('.fake-button');
fakeButton.addEventListener('dblclick', (e) => {
  e.preventDefault();
  window.getSelection().removeAllRanges();
});

2. 可选：处理快速多次点击的场景
   如果要避免快速点击多次意外选中内容，可以在mousedown事件里判断是否按下Ctrl键，非Ctrl按下时阻止默认选中：

fakeButton.addEventListener('mousedown', (e) => {
  if (!e.ctrlKey) {
    e.preventDefault();
  }
});

3. 搭配基础样式模拟按钮外观

.fake-button {
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f0f0f0;
  cursor: pointer;
  /* 不要加user-select: none */
}

这样实现后，你的div就能做到双击不选文本，但Ctrl+A全局全选时依然会被选中，和原生button的行为一致。

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