Vuorovaikutuksia

Apuohjelmaluokat, jotka muuttavat käyttäjien vuorovaikutusta verkkosivuston sisällön kanssa.

Tekstin valinta

Muuta tapaa, jolla sisältö valitaan, kun käyttäjä on vuorovaikutuksessa sen kanssa.

Tämä kappale valitaan kokonaan, kun käyttäjä napsauttaa sitä.

Tällä kappaleella on oletusvalintatoiminto.

Tätä kappaletta ei voi valita, kun käyttäjä napsauttaa.

html

<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
<p class="user-select-auto">This paragraph has default select behavior.</p>
<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>

Osoitintapahtumat

Bootstrap tarjoaa .pe-noneja .pe-autoluokkia elementtien vuorovaikutusten estämiseksi tai lisäämiseksi.

Tätä linkkiä ei voi napsauttaa.

Tätä linkkiä voi napsauttaa (tämä on oletustoiminto).

Tätä linkkiä ei voi napsauttaa, koska pointer-eventsominaisuus on peritty vanhemmalta. Tässä linkissä on kuitenkin luokka, pe-autoja sitä voi napsauttaa.

html

<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.</p>
<p><a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).</p>
<p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link</a> can not be clicked because the <code>pointer-events</code> property is inherited from its parent. However, <a href="#" class="pe-auto">this link</a> has a <code>pe-auto</code> class and can be clicked.</p>

.pe-noneLuokka (ja sen asettama CSS - pointer-eventsominaisuus) estää vain vuorovaikutuksen osoittimen (hiiri, kynä, kosketus) kanssa. Linkit ja säätimet .pe-noneovat oletusarvoisesti edelleen tarkennettavissa ja toimivia näppäimistön käyttäjille. Varmistaaksesi, että ne ovat täysin neutraloituja jopa näppäimistön käyttäjille, saatat joutua lisäämään muita attribuutteja, kuten tabindex="-1"(jotta estävät heitä saamasta näppäimistön kohdistusta) ja aria-disabled="true"(osoittaaksesi, että ne ovat tosiasiallisesti poistettu käytöstä aputekniikoissa) ja mahdollisesti käyttämään JavaScriptiä estävät niitä täysin toimimasta.

Jos mahdollista, yksinkertaisempi ratkaisu on:

Lisää disabledHTML-attribuutti lomakehallintaa varten.

Poista linkkien hrefattribuutti ja tee siitä ei-interaktiivinen ankkuri- tai paikkamerkkilinkki.

Sass

Utilities API

Vuorovaikutusapuohjelmat on ilmoitettu utilities API:ssa scss/_utilities.scss. Opi käyttämään apuohjelmien sovellusliittymää.

    "user-select": (
      property: user-select,
      values: all auto none
    ),
    "pointer-events": (
      property: pointer-events,
      class: pe,
      values: none auto,
    ),