如何让我的元素在 Vimium 中可点击？

Question

我在 Firefox 和 Chrome 上使用 Vimium，它对我有很大帮助https://github.com/philc/vimium

我注意到可以点击一些 div，我发现这class='demo-button'是其中之一

<div class='demo-button'>demo-button</div>
<div class='demobutton'>demobutton</div>
<div class='demobuttonnn'>demobuttonn</div>
<div class='demobutto'>demobutto</div>

这是 Vimium 链接的截图https://jsfiddle.net/qnvujfs6/

如您所见，demobutto使用 Vimium 只能单击最后一个 div 。我试图寻找Vimium来源demo-button或demobutton，但没有结果。

有谁知道为什么这个演示按钮div-s之间有区别？

我希望能够使用引导插件点击一些生成的元素，例如Bootstrap Toggle。这是两个切换的代码，但只能单击第二个，因为它包含demo-button类

https://codepen.io/duleorlovic/pen/VqWaEg

Answer 1

前三个是可点击的，因为该class属性包含“按钮”一词（请参阅源代码）。

出于可用性目的，它更喜欢简单地使用旨在完成这项工作的元素。例如锚点 ( <a>) 和按钮 ( <button>)。

但是，如果这是不可能的（这里似乎就是这种情况），您还可以将role属性添加到元素中。具有role以下值之一的属性的元素也将被视为可点击：

• 按钮
• 标签
• 关联
• 复选框
• 菜单项
• 菜单项复选框
• 菜单项收音机

（来源）

因此，如果您的div元素代表复选框，您的代码将如下所示：

<div class="demo-button" role="checkbox">demo-button</div>
<div class="demobutton" role="checkbox">demobutton</div>
<div class="demobuttonnn" role="checkbox">demobuttonn</div>
<div class="demobutto" role="checkbox">demobutto</div>

在这种情况下，您不依赖于特定的类名，这些类名被扩展视为“不可靠”。