Как я могу сделать свой элемент кликабельным для Vimium? - PullRequest
Новая
       13

Как я могу сделать свой элемент кликабельным для Vimium?

0 голосов
/ 25 декабря 2018

Я использую Vimium в Firefox и Chrome, и это мне очень помогает 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/

enter image description here

Как видите, только последний div demobutto не можетщелкнуть с помощью Vimium.Я пытался найти в источнике Vimium demo-button или demobutton, но безрезультатно.

У кого-нибудь есть идея, почему существует разница между этой демонстрационной кнопкой div -s?

Я хочу иметь возможность нажимать на некоторые сгенерированные элементы с помощью плагинов начальной загрузки, например Bootstrap Toggle .Вот код для двух переключателей, но только второй можно нажать, потому что он содержит demo-button класс

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

enter image description here

1 Ответ

0 голосов
/ 25 декабря 2018

Первые три кликабельны, потому что атрибут class содержит слово «кнопка» ( См. Источник ).

Для удобства использования предпочтительнее просто использовать элементы, которые предназначенычтобы сделать эту работу.Например, якоря (<a>) и кнопки (<button>).

Но если это невозможно (что, кажется, имеет место здесь), вы также можете добавить атрибут role к элементу.Элементы с атрибутом role с одним из следующих значений также будут считаться интерактивными:

  • кнопка
  • вкладка
  • ссылка
  • флажок
  • menuitem
  • menuitemcheckbox
  • menuitemradio

( Источник )

Так что если ваш 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>

В этом случае вы не зависите от конкретных имен классов , которые по расширению считаются "ненадежными" .

...