移除Firefox on Android中点击SVG时出现的「全选」蓝色水滴

我明白你在Firefox for Android上碰到的这个糟心问题——点击SVG元素时，居然会冒出文本选中的蓝色水滴标记，还弹出「复制全选」这类多余的操作菜单，确实影响体验。给你几个靠谱的解决办法：

方法1：用CSS禁用文本选择 #

给SVG元素及其父容器添加user-select: none属性（加上Firefox专属前缀确保生效），直接阻止浏览器的文本选中行为：

.starContainerHeight, 
#centerStarDiv, 
svg {
  user-select: none;
  -moz-user-select: none; /* 适配Firefox浏览器 */
}

如果SVG内部包含<text>标签，也单独给它加上样式，确保覆盖全面：

svg text {
  user-select: none;
  -moz-user-select: none;
}

方法2：用JavaScript阻止默认点击行为 #

如果CSS方案没完全生效，给SVG绑定点击事件，手动阻止浏览器的默认文本选择动作：

// 选中你的SVG元素（根据实际DOM结构调整选择器）
const svgElement = document.querySelector('svg');
svgElement.addEventListener('click', function(e) {
  e.preventDefault(); // 阻止默认的文本选中行为
});

这个方法不会影响你自己给SVG绑定的其他点击逻辑，放心用。

方法3：检查SVG的内部结构 #

有时候SVG里可能隐含了可选中的文本节点（哪怕你没特意加<text>），可以打开开发者工具检查SVG的DOM结构，确认有没有额外的文本元素，再针对性地禁用它们的选中功能。

把这些代码加到你的测试页面里，刷新后在Firefox Android上测试，应该就能彻底关闭这个烦人的行为了。

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