উপাদানকে অনিচ্ছাকৃত করুন (এর পিছনে জিনিসগুলি ক্লিক করুন)

Question

আমার একটি স্থির চিত্র রয়েছে যা কোনও পৃষ্ঠাকে ওভারলে করে যখন ব্যবহারকারী কোনও টাচ স্ক্রিন (মোবাইল) স্ক্রোল করার জন্য কাজ করে।

আমি সেই চিত্রটি "অনিচ্ছাকৃত" বা "নিষ্ক্রিয়" বা যাই হোক না কেন করতে চাই, যাতে কোনও ব্যবহারকারী যদি সেই চিত্রটি স্পর্শ করে এবং টেনে নিয়ে যায় তবে এর পেছনের পৃষ্ঠাটি এখনও স্ক্রোল করে মনে হচ্ছে যেন চিত্রটি সেখানে ইন্টারঅ্যাকশনটিকে "অবরুদ্ধ" করে নি।

এটা কি সম্ভব? যদি প্রয়োজন হয় তবে আমি যা বলতে চাইছি তার উদাহরণ দিয়ে আমি স্ক্রিন শট সরবরাহ করার চেষ্টা করতে পারি।

ধন্যবাদ!

Answer 1

সিএসএস সেট করা - pointer-events: noneচিত্রের সাথে কোনও মাউস ইন্টারঅ্যাকশন মুছে ফেলা উচিত। আইই ব্যতীত সমস্ত ক্ষেত্রে বেশ ভাল সমর্থিত।

মানগুলির একটি সম্পূর্ণ তালিকা এখানেpointer-events নিতে পারে।

Comments

পারফেক্ট! আমি pointer-eventsআগে পেরেছি না , আমি ঠিক এটিই খুঁজছিলাম। ধন্যবাদ!

— hannebaumsaway

@ ডাস্টি কিন্ডা বোঝায়, আপনি মাউস ইন্টারঅ্যাকশনগুলি এখনও অক্ষম করছেন মাউস ইন্টারঅ্যাকশন চাইছেন। আপনার নির্দিষ্ট ব্যবহারের ক্ষেত্রে কী? কোনও ইউএক্স দৃষ্টিকোণ থেকে যা স্বতঃস্ফূর্ত মনে হয় যেহেতু পয়েন্টারটি বোঝায় যে উপাদানটি ক্লিকযোগ্য। আপনি যদি জেএসফিডেল একসাথে ফেলে দেন তবে আমি একবার দেখতে পারি।

— ক্রিস ব্রাউন

@ ক্রিসব্রাউন কার্সার পরিবর্তন করায় কিছুটা হাসি ফোটে। আমি jsfiddle.net/cxwvdos0 কি ধরণের পাগল নিয়ে এসেছি তার একটি সামান্য কথা এখানে মাত্র এক সেকেন্ডের জন্য একটি বোতাম অক্ষম করতে এবং কার্সার পরিবর্তন না করে। jQuery unbindএবং bindআমি মনে করি যদি আমি আমার বেনাম ফাংশনগুলি রূপান্তর করতে চাইতাম তবে এটি কাজ করত। যদিও প্রতিক্রিয়া জন্য ধন্যবাদ!

— ধূলো

মোবাইল ডিভাইসে কাজ করে না।

— হামেন্দ্র সুন্তওয়াল

Answer 2

সিএসএস পয়েন্টার ইভেন্টস যা আপনি দেখতে চান। আপনার ক্ষেত্রে, পয়েন্টার-ইভেন্টগুলি "কিছুই নয়" তে সেট করুন। উদাহরণস্বরূপ এই জেএসফিডেলটি দেখুন ... http://jsfiddle.net/dppJw/1/

লক্ষ্য করুন যে আইকনে ডাবল ক্লিক করলেও আপনি অনুচ্ছেদে ক্লিক করবেন বলে জানাবে।

div.child {
    ...    
    background: #fff;
    pointer-events: none //This line is the key!
} 

Comments

উদাহরণের জন্য ধন্যবাদ!

— hannebaumsaway

একক ক্লিক * এবং কোড উদাহরণ (আইকনটিতে ক্লিক করা) এফএফ 68.0 এ আমার জন্য কাজ করে না।

— অ্যান্ড্রু

Answer 3

আপনি যদি জাভাস্ক্রিপ্ট ব্যবহার করতে চান:

document.getElementById("x").style.pointerEvents = "none";

<a href="https://www.google.com" id="x" />Unclickable Google Link</a>
<br>
<a href="https://www.google.com" id="" />Clickable Google Link</a>