uniapp给元素添加点击事件时出现聚焦效果（闪一下浅蓝色框）如何解决？

在uniapp中给元素绑定点击事件时，会出现点击后元素周围闪一下浅蓝色聚焦框的效果，请问如何去除这个默认的聚焦样式？尝试过添加outline:none和user-select:none都不生效，在H5端和微信小程序端都有这个问题。

2 回复

在元素上添加 :focus-visible="false" 或 CSS 样式 outline: none; 即可去除点击时的聚焦效果。


在UniApp中，点击元素时出现的聚焦效果（浅蓝色框）通常是由于浏览器或WebView默认的焦点样式导致的。解决方法如下：

  1. 使用CSS移除焦点样式
    在元素的样式中添加 outline: none; 来移除默认的焦点边框：

    .your-element-class {
  outline: none;
}

    或者针对所有元素：

    * {
  outline: none;
}

  2. 针对移动端优化
    在移动端，可以添加 -webkit-tap-highlight-color 来修改点击高亮颜色（设置为透明以消除效果）：

    .your-element-class {
  -webkit-tap-highlight-color: transparent;
}

  3. 使用 user-select 属性
    如果问题与文本选择相关，可以添加：

    .your-element-class {
  user-select: none;
}

  4. 在Vue模板中直接内联样式

    <view [@click](/user/click)="handleClick" style="outline: none; -webkit-tap-highlight-color: transparent;">点击元素</view>

注意事项：

  • 移除焦点样式可能会影响可访问性，建议仅在必要时使用。
  • 测试在不同平台（如iOS和Android）上的表现，确保兼容性。

根据需求选择适合的方法即可解决问题。

回到顶部