用户选择时 draggable="false" 不起作用：CSS 中没有定义

Posted 2023-05-08

【中文标题】用户选择时 draggable="false" 不起作用：CSS 中没有定义

【英文标题】：draggable="false" not working while user-select: none is defined in the CSS

【发布时间】：2020-09-14 21:19:17

【问题描述】：

我有一个文本链接，我将其用作网站的徽标，并且我不希望该链接是可拖动或可选择的（纯粹是为了美观，它只会是一个本地网站）。我正要问为什么draggable="false" 不起作用，但后来我发现如果我从CSS 中删除user-select: none;，它就可以正常工作。这是我的代码（注意：文本是黑色的，没有text-decoration，但没有必要定义它，因为我也在使用重置样式表）：

.logo 
    padding: 1.5em;
    text-align: center;
    user-select: none;


.heading 
    font-family: 'Yeseva One', serif;
    font-size: 3em;


.heading a 
    transition: 200ms;


.heading a:hover 
    color: #c1250f;

<div class="logo">
    <h1 class="heading"><a href="#" draggable="false">Title</a></h1>
</div>

您知道为什么它们不能协同工作吗？有什么办法可以解决吗？

【问题讨论】：

我不明白问题出在哪里。当您的代码中出现draggable="false" 和user-select: none; 时，它们似乎都运行良好。

@ZachP。它们应该可以正常工作，但事实并非如此。至少不适合我。

你能上传你与它互动的视频吗？

@ZachP。当然，给我一分钟。

您在哪个浏览器中测试？

【参考方案1】：

它并不完美，但是 cursor: none 在该链接上意味着它在悬停时没有光标并且拖动是有限的。您在这里与浏览器默认设置作斗争，但这几乎可以满足您的需求。

.logo 
    padding: 1.5em;
    text-align: center;
    user-select: none;


.heading 
    font-family: 'Yeseva One', serif;
    font-size: 3em;


.heading a 
    transition: 200ms;


.heading a:hover 
    color: #c1250f;


.no-drag 
cursor: none;

<div class="logo">
    <h1 class="heading"><a class="no-drag" href="#" draggable="false">Title</a></h1>
</div>