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

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

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

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

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

Answer 1

前三个是可点击的，因为class 属性包含单词“按钮” (See source)。

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

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

• 按钮
• 标签
• 链接
• 复选框
• 菜单项
• 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"。