javascript - li的onclick未被触发，但li专注

当我处理ul / li元素时遇到一个奇怪的问题。

像这样非常简单的html / css

li {
  cursor: pointer;
}

li:hover {
  background-color: yellow;
}

li:focus {
  background-color: red;
  margin: 30px -20px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet"/>
<ul class="collection">
  <li class="collection-item" onclick="window.alert('Click on li collection')" tabindex="0">Item 1</li>
  <li class="collection-item"  onclick="window.alert('Click on li collection')" tabindex="0">Item 2</li>
  <li class="collection-item"  onclick="window.alert('Click on li collection')" tabindex="0">Item 3</li>
</ul>

附言尝试代码：https://jsfiddle.net/vcbmbjx0/，似乎片段的css不能正常工作。

我想要的是在聚焦li元素时更改边距，但是似乎此更改打破了click事件的发出。 （当我在项目1和项目2的中间单击时，不会触发单击，但是会触发项目2的焦点效果...）

有人有想法么？

最佳答案

在点击发生之前，焦点的边缘似乎正在使您的元素移开。

如果删除边距，则可以使用：

.collection-item {
  cursor: pointer;
  &:hover {
    background-color: yellow;
  }
  &:focus {
    background-color: red;
    //margin: 30px -20px;  --> offending line
  }
}

https://jsfiddle.net/vcbmbjx0/2/

或按下鼠标的方式如上所述：

https://jsfiddle.net/vcbmbjx0/3/