"পয়েন্টার-ইভেন্টগুলি: কিছুই নয়" ব্যবহার করার সময় CSS কার্সার সম্পত্তি যুক্ত করুন

Question 1

আমি একটি নির্দিষ্ট লিঙ্কটি অক্ষম করার এবং কার্সার স্টাইল প্রয়োগ করার চেষ্টা করছি তবে এই CSS কমান্ডটি cursor: text;কার্যকর হবে না। কার্সার সর্বদা ডিফল্ট থাকে। আমি সর্বশেষতম ফায়ারফক্স সংস্করণ ব্যবহার করছি।

সিএসএস:

pointer-events: none !important;
cursor: text;
color: Blue;

Question 2

ব্যবহারটি সেই উপাদানটির সাথে সমস্ত মাউস ইন্টারঅ্যাকশন অক্ষমpointer-events: none করবে । আপনি যদি সম্পত্তিটি পরিবর্তন করতে চান তবে আপনাকে প্যারেন্ট উপাদানটিতে পরিবর্তনগুলি প্রয়োগ করতে হবে। আপনি কোনও উপাদানটির সাথে লিঙ্কটি মোড়ানো করতে পারেন এবং এতে সম্পত্তি যুক্ত করতে পারেন।cursorcursor

উদাহরণ এখানে

এইচটিএমএল

<span class="wrapper">
    <a href="#">Some Link</a>
</span>

সিএসএস

.wrapper {
    position: relative;
    cursor: text;  /* This is used */
}
.wrapper a {
    pointer-events: none;
}

যদিও কয়েকটি ব্রাউজারের অসঙ্গতি রয়েছে। আইই 11 এ এই কাজটি করতে, মনে হচ্ছে আপনার একটি সিডো উপাদান দরকার। ছদ্ম উপাদানটি আপনাকে এফএফ-তে পাঠ্য নির্বাচন করতে দেয়। অদ্ভুতরূপে যথেষ্ট, আপনি এটি Chrome ছাড়াই পাঠ্যটি নির্বাচন করতে পারেন।

আপডেট করা উদাহরণ

.wrapper:after {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
}

Question 3

এটি আসল প্রশ্নটি থেকে অনেক দীর্ঘ, তবে কোনও মোড়ানো উপাদান এবং কার্সার ছাড়াই কোনও পয়েন্টার-ইভেন্ট ছাড়াই এটি আমার সমাধান:

<!-- Add tabindex="-1" so that element cannot be reached by keyboard -->
<a href="url" class="disabled" tabindex="-1" onfocus="this.blur()">Disabled link</a>

সিএসএস:

/* Adding cursor just works: */
.disabled {
    cursor: not-allowed;
}

/* Makes link non-clickable: */
.disabled:active {
    pointer-events: none;
}

কোডপেন উদাহরণ

সম্পাদনা:

ক্রোম ট্যাবিনডেক্স অ্যাট্রিবিউটযুক্ত উপাদানগুলিতে ক্লিক করে ফোকাস যুক্ত করতে শুরু করেছে (এমনকি ট্যাবডেক্স = "- 1" সহ)। দ্রুততম সমাধানটি onfocus="this.blur()"আনফোকাস উপাদানগুলিতে সেট করা।
আপনাকে উপাদানটিকে ফোকাস করা রোধ করতে হবে অন্যথায় এটি এন্টার কী দ্বারা সক্রিয় করা যেতে পারে

Question 4

নির্দিষ্ট করে pointer-events:noneআপনি সক্রিয়ভাবে ঘোষণা করছেন যে উপাদান এবং কার্সারের মধ্যে কোনও মাউস ইন্টারঅ্যাকশন নেই। সুতরাং এটিতে একটি কার্সারও থাকতে পারে না - এটি সমস্ত মাউস আচরণের জন্য অদৃশ্য ।

প্রমাণ পাওয়া যায় এখানে ।

Question 5

সরান pointer-events: none !important;। জাভাস্ক্রিপ্ট ব্যবহার করে লিঙ্কটি অক্ষম করুন:

anchorElement.onclick = function(){
  return false;
}

আপনি যদি না জানেন তবে জাভাস্ক্রিপ্ট anchorElementহ'ল নোড বা এলিমেন্ট। একটি এলিমেন্ট পাওয়ার সর্বাধিক সাধারণ উপায় হ'ল এইচটিএমএল idবৈশিষ্ট্যটি ব্যবহার করে । যাক আমাদের আছে:

<a id='whatever' href='#'>Text Here</a>

আপনার কোডটি হতে পারে:

document.getElementById('whatever').onclick = function(){
  return false;
}

নোডগুলি পাওয়ার আরও অনেকগুলি উপায় রয়েছে।

Question 6

আমার ব্যবহারের কেসটি একটি টেনে আনে এমন উপাদান যা কোনও পয়েন্টার-ইভেন্ট বা পয়েন্টার-ইভেন্টের সাথে কোনও প্যারেন্ট উপাদান থাকতে পারে না।

আমি শর্তসাপেক্ষে কেবল টেনে আনার সময় একটি দখল কার্সারকে জোর করে বিশ্বব্যাপী স্টাইল প্রয়োগ করে এটি সমাধান করেছি। (আমি প্রতিক্রিয়া এবং স্টাইলযুক্ত উপাদানগুলি ব্যবহার করছি তবে ভ্যানিলা জেএসে একই যুক্তি প্রয়োগ করা যেতে পারে)।

const SetDraggingCursor = createGlobalStyle`
  * {
    cursor: grabbing !important;
  }
`;

// ...

{isDragging && <SetDraggingCursor />}

Question 7

আপনি অন্য একটি ডিভিও তৈরি করতে পারেন এবং এটি আপনার শেষ ডিভের উপর ঠিকঠাকভাবে তৈরি করতে পারেন এবং এর মতো সিএসএস তৈরি করতে পারেন:

.example{
    background-color: rgba(255, 255, 255, 0); //opacity:0
    z-index: 1;
    cursor: not-allowed;
}

Question 8

মোড়কের পরিবর্তে, অভ্যন্তরীণ দিক থেকে খাঁটি সিএসএস দিয়েও এটি করা যায়। (আমি এটি মেটেরিয়াল ওয়েব উপাদান সহ ব্যবহার করি, তাই কোডটি আরও কিছুটা জটিল হয়)

button:disabled {
    > * {
        cursor: not-allowed;
        pointer-events: initial;
    }

    &::before {
        background-color: #fff0;
    }

    &::after {
        background-color: #fff0;
    }
}

<button>
    <svg .../>
</button>

আমিও চেষ্টা ::beforeএবং ::afterসঙ্গে button:disabledসরাসরি, কিন্তু এটা ঘটতে করতে পারেনি ...