Angular-material ng-click 奇怪的边框高亮

Posted 2023-02-19

【中文标题】Angular-material ng-click 奇怪的边框高亮

【英文标题】：Angular-material ng-click strange border highlight

【发布时间】：2015-09-07 23:48:16

【问题描述】：

我在使用 AngularJS 和 Angular-Material 时遇到问题。

看看下面的代码：

<div flex="100">
   <ul class="list-group">
       <li class="list-group-item cursorPointer" 
        ng-repeat="item in array" ng-click="selectItem(item)">
          item.name
       </li>
    </ul>
</div>

li 标签附加了一个 ng-click 函数，其中包含一些业务逻辑。问题是当你点击它时会出现一个奇怪的边框（类似于用户选择突出显示），我似乎无法弄清楚它来自哪里。

这似乎只在我在元素上有 ng-click 指令时出现（在 span 元素上的行为相同）

使用的版本：

AngularJS - 1.4.1

角材料 - 0.9.4

Angular-Aria - 1.4.0

Angular-Animate - 1.4.1

Angular-UI-Boostrap - 0.9.0

引导程序 - 3.2.0

JQuery - 2.1.4

有什么想法吗？例如，请参阅此 plnkr：http://plnkr.co/edit/60u8Ur?p=preview

【问题讨论】：

Bootstrap 将它用于链接项目组项目，我想知道 angular-bootstrap 是否不会将 CSS 应用于可点击和列表组项目的元素。只是猜测。

@gillesc 问题是，如果我删除所有的角度材料脚本，高亮就会消失。所以它必须来自有角材料，但我无法弄清楚它到底是从哪里来的。

【参考方案1】：

你的问题是:focus，你可以通过做这样的事情来解决

 span:focus 
    outline: none;
    border: 0;
 

所以这只是为了您的跨度，如果您想在其他地方删除它，您可以更具体地了解其他项目。

【讨论】：

不是重点。检查我在问题中提供的 plnkr 并尝试一下。

@RusPaul 它是焦点，你只需要将它从你想要的任何元素中删除，我只是有一个例子。如果您使用的是 chrome，请打开开发工具，转到元素标签并检查您的 li（或您有 ng-click 的任何一个），然后右键单击并强制元素状态为 :focus。

@RusPaul 你指的是哪一部分不工作？

那个奇怪的蓝色边框仍然没有消失。见截图：i.imgur.com/6hR3hbA.png

@RusPaul 更新了 css，使用 outline: none;和边框：0；见这里 -plnkr.co/edit/V9n42JiMWmWrvvpHqdrO?p=preview 。瞄准你想要的任何东西，如果你愿意，你可能会做一个 *:focus，但不建议使用 *.

【参考方案2】：

我在大多数元素上都遇到了同样的问题。

在我的例子中，以下 CSS 代码有效：

*:focus 
    outline: none !important;
    border: 0 !important;

【参考方案3】：

这可能很容易： 将nofocus 类添加到该元素，

并将 css 添加到 :focus 上的该类

.nofocus:focus 
    outline: none;