如何移除点击div（非<input>）中文本时出现的闪烁光标

你遇到的闪烁光标是文本插入光标，和鼠标指针不是一回事，所以cursor属性（用来控制鼠标指针样式）对它完全无效。下面是两种直接有效的解决方案：

方案1：禁止文本选中（推荐） #

给包含文本的元素添加user-select: none样式，阻止点击时选中文本，插入光标自然就不会出现，同时完全不影响点击事件的触发。

修改你的CSS代码，在.round>div, .round>span选择器中新增属性：

.round>div,
.round>span {
    background-color: #021489;
    display: inline-grid;
    height: 100px;
    width: 200px;
    cursor: default;
    user-select: none; /* 核心：禁止文本选中 */
    -webkit-user-select: none; /* 兼容Chrome、Safari等webkit内核浏览器 */
    -moz-user-select: none; /* 兼容Firefox */
}

方案2：阻止元素获得焦点 #

如果方案1没生效，可以通过让元素无法聚焦来避免插入光标。给目标div添加tabindex="-1"属性，同时移除焦点轮廓：

HTML修改： #

<div id="r1c1r1" class="answer" onclick="question('r1c1r1')" tabindex="-1">
    100
</div>

CSS新增： #

.round>div:focus {
    outline: none; /* 移除聚焦时的默认轮廓 */
}

两种方案都能保留onclick事件的功能，同时解决闪烁光标问题，优先推荐方案1，因为实现更简洁，兼容性也更好。

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