防止双击伪装成按钮的div时选择文本

Question

不是X/Y问题。只是好奇我问的是否可能

我试图通过给div提供<button>所具有的大部分本地属性来让它充当按钮，但我似乎无法复制双击按钮不选择其内容的行为。

大多数"；修复"；我发现只是一起禁用了选择，但这并不是一个解决方案，因为如果在web文档中按CTRL+a，仍然可以选择常规的<button>。

我试过用apperance: button，但没有用。浏览器是否对开发工具中看不到的按钮做了一些挑剔的事情？

Answer 1

const div = document.querySelector("div");
document.addEventListener('keydown', function(e) {
if (e.ctrlKey) div.style.userSelect = 'unset';
});
document.addEventListener('keyup', function(e) {
div.style.userSelect = 'none';
});

body {
display: flex;
min-height: 100vh;
align-items: center;
}
div,
button {
margin: auto;
background-color: #ddd;
border-radius: 3px;
padding: 16px 32px;
border: none;
user-select: none;
}
div:active,
button:active {
background-color: red;
}
span {
margin: auto;
}

<div>I'm a little button</div>
<button>I'm a realy button</button>
<span>Press CTRL + A</span>