如何使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/

的屏幕截图

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

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

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

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

Answer 1

由于class属性包含单词“ button”（See source），因此前三个是可单击的。

出于可用性的目的，它倾向于仅使用旨在完成该任务的元素。例如锚点（<a>）和按钮（<button>）。

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

• 按钮
• 标签
• 链接
• 复选框
• menuitem
• menuitemcheckbox
• menuitemradio

（Source）

因此，如果您的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>

在这种情况下，您不必依赖特定的类名which are by the extension considered "as unreliable"。