Intarakshɔn dɛn
Yutiliti klas dɛn we de chenj aw di wan dɛn we de yuz di wɛbsayt de tɔk to di tin dɛn we de insay wan wɛbsayt.
Di tɛks we yu de pik
Chenj di we aw dɛn pik di tin dɛn we de insay we di pɔsin we de yuz am de tɔk to am.
Dis paregraf go pik ɔltin we di pɔsin we de yuz am klik am.
Dis paregraf gɛt difɔlt sɛlɛkt bihayvya.
Dis paregraf nɔ go ebul fɔ pik we di pɔsin we de yuz am klik am.
<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>
Pointer ivent dɛn
Bootstrap de gi .pe-none
ɛn .pe-auto
klas fɔ protɛkt ɔ ad ɛlimɛnt intarakshɔn dɛn.
Yu nɔ go ebul fɔ klik dis link .
Yu kin klik dis link (dis na difɔlt bihayvya).
Yu nɔ go ebul fɔ klik dis linkpointer-events
bikɔs di prɔpati gɛt frɔm in mama ɔ papa. Bɔt dis link gɛt pe-auto
klas ɛn yu kin klik am.
<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>
Di .pe-none
klas (ɛn di pointer-events
CSS prɔpati we i sɛt) de jɔs mek intarakshɔn wit pɔynta (maus, stayl, tɔch). Links ɛn kɔntrol wit .pe-none
na, bay difɔlt, stil fɔs ɛn akshɔnable fɔ kibɔd yuza dɛn. Fɔ mek shɔ se dɛn rili nyutralayz ivin fɔ di wan dɛn we de yuz di kibɔd, yu kin nid fɔ ad ɔda atribyut dɛn lɛk tabindex="-1"
(fɔ mek dɛn nɔ gɛt kibɔd fɔs) ɛn aria-disabled="true"
(fɔ mek dɛn no di tru tin we se dɛn dɔn disable fayn fayn wan to ɛtɛknɔlɔji dɛn we de ɛp dɛn), ɛn sɔntɛm yu kin yuz JavaSkript fɔ kɔmplit wan fɔ mek dɛn nɔ ebul fɔ du sɔntin.
If i pɔsibul, di simpul we fɔ sɔlv di prɔblɛm na:
- Fɔ fɔm kɔntrol dɛn, ad di
disabled
HTML atribyut.
- Fɔ link dɛn, pul di
href
atribyut, mek i bi nɔ-intaraktiv ankɔ ɔ pleshɔlda link.
Sass we bin de
Yutiliti dɛn API
Intarakshɔn yutiliti dɛn de diklar insay wi yutiliti dɛn API insay scss/_utilities.scss
. Lan aw fɔ yuz di yutiliti dɛn API.
"user-select": (
property: user-select,
values: all auto none
),
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),