ਮੁੱਖ ਸਮੱਗਰੀ ਤੇ ਜਾਓ ਡੌਕਸ ਨੈਵੀਗੇਸ਼ਨ 'ਤੇ ਜਾਓ
Check
in English

ਪਰਸਪਰ ਪ੍ਰਭਾਵ

ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਜੋ ਬਦਲਦੀਆਂ ਹਨ ਕਿ ਉਪਭੋਗਤਾ ਇੱਕ ਵੈਬਸਾਈਟ ਦੀ ਸਮੱਗਰੀ ਨਾਲ ਕਿਵੇਂ ਗੱਲਬਾਤ ਕਰਦੇ ਹਨ।

ਟੈਕਸਟ ਚੋਣ

ਸਮੱਗਰੀ ਨੂੰ ਚੁਣਨ ਦਾ ਤਰੀਕਾ ਬਦਲੋ ਜਦੋਂ ਉਪਭੋਗਤਾ ਇਸ ਨਾਲ ਇੰਟਰੈਕਟ ਕਰਦਾ ਹੈ।

ਉਪਭੋਗਤਾ ਦੁਆਰਾ ਕਲਿੱਕ ਕੀਤੇ ਜਾਣ 'ਤੇ ਇਹ ਪੈਰਾਗ੍ਰਾਫ ਪੂਰੀ ਤਰ੍ਹਾਂ ਚੁਣਿਆ ਜਾਵੇਗਾ।

ਇਸ ਪੈਰੇ ਵਿੱਚ ਡਿਫੌਲਟ ਚੋਣ ਵਿਹਾਰ ਹੈ।

ਉਪਭੋਗਤਾ ਦੁਆਰਾ ਕਲਿੱਕ ਕੀਤੇ ਜਾਣ 'ਤੇ ਇਹ ਪੈਰਾਗ੍ਰਾਫ਼ ਚੋਣਯੋਗ ਨਹੀਂ ਹੋਵੇਗਾ।

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>

ਪੁਆਇੰਟਰ ਇਵੈਂਟਸ

ਬੂਟਸਟਰੈਪ ਤੱਤ ਪਰਸਪਰ ਕ੍ਰਿਆਵਾਂ ਨੂੰ ਰੋਕਣ ਜਾਂ ਜੋੜਨ ਲਈ ਕਲਾਸਾਂ ਪ੍ਰਦਾਨ .pe-noneਕਰਦਾ ਹੈ।.pe-auto

ਇਸ ਲਿੰਕ 'ਤੇ ਕਲਿੱਕ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।

ਇਸ ਲਿੰਕ 'ਤੇ ਕਲਿੱਕ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ (ਇਹ ਡਿਫੌਲਟ ਵਿਵਹਾਰ ਹੈ)।

ਇਸ ਲਿੰਕ 'ਤੇ ਕਲਿੱਕ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ ਕਿਉਂਕਿ pointer-eventsਜਾਇਦਾਦ ਇਸਦੇ ਮਾਤਾ-ਪਿਤਾ ਤੋਂ ਵਿਰਾਸਤ ਵਿੱਚ ਮਿਲੀ ਹੈ। ਹਾਲਾਂਕਿ, ਇਸ ਲਿੰਕ ਦੀ ਇੱਕ pe-autoਕਲਾਸ ਹੈ ਅਤੇ ਇਸ 'ਤੇ ਕਲਿੱਕ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।

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-noneਕਲਾਸ (ਅਤੇ ਇਸ ਦੁਆਰਾ ਸੈੱਟ ਕੀਤੀ CSS pointer-eventsਵਿਸ਼ੇਸ਼ਤਾ) ਸਿਰਫ ਇੱਕ ਪੁਆਇੰਟਰ (ਮਾਊਸ, ਸਟਾਈਲਸ, ਟੱਚ) ਨਾਲ ਪਰਸਪਰ ਪ੍ਰਭਾਵ ਨੂੰ ਰੋਕਦੀ ਹੈ। ਨਾਲ ਲਿੰਕ ਅਤੇ ਨਿਯੰਤਰਣ .pe-none, ਮੂਲ ਰੂਪ ਵਿੱਚ, ਕੀਬੋਰਡ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਅਜੇ ਵੀ ਫੋਕਸ ਕਰਨ ਯੋਗ ਅਤੇ ਕਾਰਵਾਈਯੋਗ ਹਨ। ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਉਹ ਕੀਬੋਰਡ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਵੀ ਪੂਰੀ ਤਰ੍ਹਾਂ ਨਿਰਪੱਖ ਹਨ, ਤੁਹਾਨੂੰ ਹੋਰ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ ਜਿਵੇਂ ਕਿ tabindex="-1"(ਉਨ੍ਹਾਂ ਨੂੰ ਕੀਬੋਰਡ ਫੋਕਸ ਪ੍ਰਾਪਤ ਕਰਨ ਤੋਂ ਰੋਕਣ ਲਈ) ਅਤੇ aria-disabled="true"(ਇਸ ਤੱਥ ਨੂੰ ਦੱਸਣ ਲਈ ਕਿ ਉਹ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਲਈ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਅਯੋਗ ਹਨ), ਅਤੇ ਸੰਭਵ ਤੌਰ 'ਤੇ JavaScript ਦੀ ਵਰਤੋਂ ਕਰੋ। ਉਹਨਾਂ ਨੂੰ ਕਾਰਵਾਈਯੋਗ ਹੋਣ ਤੋਂ ਪੂਰੀ ਤਰ੍ਹਾਂ ਰੋਕੋ।

ਜੇ ਸੰਭਵ ਹੋਵੇ, ਤਾਂ ਸਰਲ ਹੱਲ ਹੈ:

  • ਫਾਰਮ ਨਿਯੰਤਰਣ ਲਈ, disabledHTML ਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਕਰੋ।
  • ਲਿੰਕਾਂ ਲਈ, ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਹਟਾਓ, hrefਇਸਨੂੰ ਇੱਕ ਗੈਰ-ਇੰਟਰਐਕਟਿਵ ਐਂਕਰ ਜਾਂ ਪਲੇਸਹੋਲਡਰ ਲਿੰਕ ਬਣਾਉ।

ਸੱਸ

ਉਪਯੋਗਤਾ API

ਇੰਟਰਐਕਸ਼ਨ ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ ਸਾਡੀਆਂ ਉਪਯੋਗਤਾਵਾਂ API ਵਿੱਚ ਘੋਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਹੈ scss/_utilities.scssਯੂਟਿਲਿਟੀਜ਼ API ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰਨੀ ਹੈ ਬਾਰੇ ਜਾਣੋ।

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