Question

所以我有一个统一的WebGL游戏，在我的画布下面我有一些指向商业相关网站，支持/社交等的链接。

我们的游戏通常需要用户点击很多，现在它很恼人，当用户三次点击正文时，底部的这些链接图像会突出显示并被选中。

它实际上并没有影响游戏玩法，但令人讨厌。

这是页面的结构。（为安全起见，已删除网址）

<img id="titleLogo" src="..." >
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" height="639px" width="1024px"></canvas>
<div id="loadingBox">
    <div id="bgBar"></div>
    <div id="progressBar"></div>
    <p id="loadingInfo">Loading...</p>
</div>
<div id="footer">
    <table id="links">
    <tr>
        <td><a href="..." target="_blank"><img id="likeus" src="..." ></a></td>
        <td><a href="..." target="_blank"><img id="faqhelp" src="..." ></a></td>
    </tr>
    <tr>
        <td style="text-align: right;"><a href="..." target="_blank"><img id="hippo" src="..." ></a></td>
        <td><a href="..." target="_blank"><img id="kong" src=".." ></a></td>
    </tr>
    </table>
</div>

Answer 1

您可以使用用户选择，如下所述： https://developer.mozilla.org/en/docs/Web/CSS/user-select

.noSelect{
 -moz-user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
}

在css中并在画布启动时将noSelect类添加到所有内容

HTML5：如何在画布上单击时停止三次鼠标点击选择其他html元素？

1 个答案: