有使用 vue-element-admin 的朋友遇到过“显示选中”这个奇怪的问题吗？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1158 天前的主题，其中的信息可能已经有所发展或是发生改变。

https://github.com/PanJiaChen/vue-element-admin

问题描述：点击系统布局设置（右侧蓝色设置按钮）中的“侧边栏 Logo”，鼠标快速反复切换，在显示 Logo 的同时，会选中 Logo 图片和文字。但是只在 Chrome 系浏览器有此问题，Firefox 没有。

我发现 vue-element-admin 官方预览是没有问题的，对比后发现他部署的 deploy 库的 public/index.html 文件多个一行 script 的引入：

<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CE7IK5QY&placement=panjiachengithubio" id="_carbonads_js"></script>

去掉这个就会有同样的问题了。

问题复现可使用如下地址（右上角头像-布局设置-显示 Logo ）：
https://demo.django-vue-admin.com/

同时，我看了其他使用 vue-element-admin 做的项目，比如：
http://vue.ruoyi.vip/login?redirect=%2Findex
https://el-admin.xin/login?redirect=%2Fmonitor%2Fserver
都没有这个问题。

在我测试的时候，我把 RightPanel 这个遮罩层组件去了，直接把设置按钮放在页面上，发现就没有问题了。

请问下各位大佬，这个是不是点击穿透导致选中了，那为啥官方的演示部署版本加了个脚本引入就没问题了呢？
虽然这个问题无关紧要，但是还是想知道这个问题该如何解决？谢谢。

script

logo

问题

选中

2 条回复 • 2021-09-15 10:31:57 +08:00

Vegetable

2021-09-15 09:52:35 +08:00

成因不确定，但是解决挺简单的

前端开发中，对于这种显然不应该出现选中状态的内容，添加禁止选中是一个好习惯。

.sidebar-logo-container {
user-select: none;
}

coolair

2021-09-15 10:31:57 +08:00

@Vegetable 这样确实可以解决，感谢！

同时我发现另外两个项目没问题是因为：这个 Logo 设置按钮不是侧边栏最后一个元素，如果放最后也会有问题。