单击导航栏链接时意外选择的文本（Android 上的 chrome mobile）-解网

问：

当我在我的 html 页面上选择文本时，后续单击导航栏链接将一遍又一遍地选择和取消选择文本。这是在装有最新版本的 android 的三星设备的 chrome（最新版本）上测试的。我正在附上一个片段来了解问题。请在 Android 设备上运行代码段以验证问题。

function goTo(){}

nav {
    padding: 10px 20px 15px 0;
    height: calc(45px + 1vw);
    justify-content: center;
    user-select: none; /* rende testo non selezionabile */
    -moz-user-select: none; /* firefox */
    -webkit-user-select: none; /* Chrome, Opera and Safari*/
    -ms-user-select: none; /* IE, ms-edge */
    flex-direction: column;
    align-items: end;
    background-color: #040405;
    position: relative;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    transition: .3s ease;
    z-index: 1;
}

nav.light {
    background-color: #EDE8DD;
}

nav ul li {
    display: inline-block; /* allinea orizzontalmente i link della navbar */
    padding-left: calc(15px + 1vw); /* padding a sinistra di ogni link della navbar */
}

nav a {
    color: #A2A2A4 !important;
    text-decoration: none; /* elimina elementi decorativi dei link presenti di default */
    position: relative;
    transition: all .3s ease; /* transizione cambio colore onHover e colore sfondo */
    cursor: pointer;
    font-size: calc(10px + 0.8vw);
    background-color: transparent;
    -webkit-tap-highlight-color: transparent; /* evita effetto pressione link */
}

nav.light a {
    color: #575758 !important;
}

nav a.active {
    color: #FEFEFE !important;
}

nav.light a.active {
    color: #040405 !important;
}

nav a.active::before { /* rende visibile striscia sotto link attivo */
    content: "";
    position: absolute;
    background-color: #d52d08;
    border-radius: 20px;
    height: 3px;
    width: 100%;
    left: 0;
    bottom: -5px;
    transition: .3s ease;
    pointer-events: none; /* evita bug che rende la striscia cliccabile */
}

@media (hover : hover) {
    nav a:hover::after { /* rende visibile striscia sotto link quando hover (dispositivi che lo permettono) */
        content: "";
        position: absolute;
        background-color: #d52d08;
        border-radius: 20px;
        height: 3px;
        width: 100%;
        left: 0;
        bottom: -5px;
        transition: .3s ease;
        pointer-events: none; /* evita bug che rende la striscia cliccabile */
    }
}

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">
    <title>Esame di stato</title>
</head>
<body>
    <nav id="menu">
        <ul>
            <li><a id="home" class="active" onclick="goTo(id)">Home</a></li><!--
            --><li><a id="educazione_civica" onclick="goTo(id)">Educazione civica</a></li><!--
            --><li><a id="pcto" onclick="goTo(id)">Pcto</a><!--
            --><li><a id="materie"  onclick="goTo(id)">Materie</a>
            </li>
        </ul>
    </nav>
  <p style="margin-top: 100px;">Select this text and then if you click on the navbar links the text will be selected and deselected by itself</p>
  <p>This only happens on android</p>
</body>
</html>

我不想否认在整个页面中选择文本的能力，但我想避免这种行为。

这是在选择“Etica”文本后单击导航栏上的链接时发生的情况的示例：

JavaScript HTML CSS 文本选择

答： 暂无答案

上一个：移动设备上的文本选择错误，显示“全选”

下一个：vue3 transition 在布局组件中不起作用

单击导航栏链接时意外选择的文本（Android 上的 chrome mobile）

Text accidentally selected when clicking on navbar link (chrome mobile on Android)

评论