html - 如何使Vimium的元素可点击？

我在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 Toggle。这是两个切换的代码，但是只能单击第二个，因为它包含demo-button类

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

最佳答案

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

出于可用性的目的，它倾向于仅使用旨在完成该工作的元素。例如 anchor (<a>)和按钮(<button>)。

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

按钮

选项卡

链接

复选框

菜单项

menuitem复选框

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"。