Kev sib tham
Cov chav kawm siv hluav taws xob hloov pauv li cas cov neeg siv cuam tshuam nrog cov ntsiab lus ntawm lub vev xaib.
Xaiv cov ntawv
Hloov txoj hauv kev uas cov ntsiab lus raug xaiv thaum tus neeg siv cuam tshuam nrog nws.
Cov kab lus no yuav raug xaiv tag nrho thaum nias los ntawm tus neeg siv.
Cov kab lus no muaj tus cwj pwm xaiv ua ntej.
Cov kab lus no yuav tsis xaiv tau thaum tus neeg siv clicked.
<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 xwm txheej
Bootstrap muab .pe-none
thiab .pe-auto
cov chav kawm los tiv thaiv lossis ntxiv cov khoom sib cuam tshuam.
Qhov txuas no tsis tuaj yeem nias.
Qhov txuas no tuaj yeem raug nyem (qhov no yog tus cwj pwm qub).
Qhov txuas no tsis tuaj yeem nyem vim tias cov pointer-events
cuab yeej tau txais los ntawm nws niam nws txiv. Txawm li cas los xij, qhov txuas no muaj pe-auto
chav kawm thiab tuaj yeem nyem.
<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>
Cov .pe-none
chav kawm (thiab cov pointer-events
cuab yeej CSS nws teev) tsuas yog tiv thaiv kev cuam tshuam nrog tus taw tes (nas, stylus, kov). Kev sib txuas thiab kev tswj hwm nrog .pe-none
yog, los ntawm lub neej ntawd, tseem tsom tau thiab ua tau zoo rau cov neeg siv keyboard. Txhawm rau kom ntseeg tau tias lawv tsis muaj kev cuam tshuam tag nrho txawm rau cov neeg siv cov keyboard, koj yuav tsum tau ntxiv cov yam ntxwv ntxiv xws li tabindex="-1"
(kom tiv thaiv lawv los ntawm kev txais cov keyboard tsom) thiab aria-disabled="true"
(kom qhia qhov tseeb tias lawv tau ua haujlwm tsis zoo rau kev pabcuam thev naus laus zis), thiab tejzaum nws siv JavaScript rau. tag tiv thaiv lawv los ntawm kev ua.
Yog tias ua tau, qhov kev daws teeb meem yooj yim dua yog:
- Rau daim ntawv tswj, ntxiv
disabled
HTML attribute.
- Rau kev sib txuas, tshem tawm tus
href
cwj pwm, ua rau nws tsis muaj kev sib tham sib txuas lossis qhov chaw txuas.
Sass
Utilities API
Kev sib cuam tshuam cov nqi hluav taws xob tau tshaj tawm hauv peb cov khoom siv hluav taws xob API hauv scss/_utilities.scss
. Kawm paub siv cov khoom siv hluav taws xob API li cas.
"user-select": (
property: user-select,
values: all auto none
),
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),