এইচটিএমএল / সিএসএস: ক্লিকগুলিতে একটি ডিভিশনকে "অদৃশ্য" করুন?

Question

বিভিন্ন কারণে, আমার <div>কিছু পাঠ্যের উপরে একটি (বেশিরভাগ) স্বচ্ছ লাগানো দরকার । তবে এর অর্থ হ'ল পাঠ্যটি ক্লিক করা যাবে না (যেমন, লিঙ্কগুলি ক্লিক করতে বা এটি নির্বাচন করতে)। ক্লিক এবং অন্যান্য মাউস ইভেন্টগুলিতে কেবল এই ডিভটিকে "অদৃশ্য" করা সম্ভব হবে?

উদাহরণস্বরূপ, overlayডিভ কভারটি পাঠ্যটি কভার করে তবে আমি overlayডিভাইসের মাধ্যমে পাঠ্যটি ক্লিক / নির্বাচন করতে সক্ষম হতে চাই :

<div id="container">
    <p>Some text</p>
    <div id="overlay" style="position: absolute; top: 0;
                             left: 0; width: 100%; height:100%">
        ... some content ...
    </div>
 </div>

Comments

সংক্ষিপ্ত উত্তর হলো 'না'। (বেশ কয়েকবার আলোচনা করা হয়েছে, তবে ডুপস এটির জন্য খুঁজে পাওয়া শক্ত, ভাল কীওয়ার্ডগুলি ভাবতে পারে না ...) স্বচ্ছ ডিআইভির জন্য আপনার কী দরকার?

— পেক্কা

আমি মনে করি না এটি সম্ভব। সম্ভবত আপনি "বিভিন্ন কারণ" সম্পর্কে বলতে পারেন অর্থাত্ আপনি কী অর্জন করতে চান?

— davehauser

ওপি কী করতে চায় তা পরিষ্কার না হওয়া পর্যন্ত @ নুল আমি -1 আটকে রেখেছি।

— পেক্কা

নালুউজারএক্সেপশন - কীভাবে তিনি তার ওয়েবসাইট থেকে বিষয়বস্তু অনুলিপি করতে লোকদের প্রস্তাব দিচ্ছেন? যদি কিছু হয় তবে তিনি তার বিপরীতে চেষ্টা করছেন - তিনি তার স্বচ্ছ ডিভের প্রভাব (পাঠ্যকে ক্লিক এবং নির্বাচন করা আরও শক্ত করে তোলার) এড়াতে চান।

— হামারাইট

@ হ্যামার আপনি ঠিক বলেছেন আমি ডাউনভোটটি সরিয়েছি।

— ই

Answer 1

এটি সিএসএস ব্যবহার করে করা যেতে পারে pointer-events। এই বৈশিষ্ট্যটি ফায়ারফক্স 3.6+, ক্রোম 2+, আইই 11+, এবং সাফারি 4+ এ সমর্থিত। দুর্ভাগ্যক্রমে, আমার ক্রস ব্রাউজারের কার্যবিধির জ্ঞান নেই।

#overlay {
  pointer-events: none;
}

Comments

আহ, ভাল লাগছে! এখন, একমাত্র সমস্যাটি হ'ল আমি কিছু বাচ্চাদের পয়েন্টার ইভেন্টগুলি গ্রহণ করতে বাধ্য করেছিলাম ... তবে সম্ভবত আমি এটি বুঝতে পারি। ধন্যবাদ!

— ডেভিড ওলবার

শীতল: pointer-events: visibleদেখে মনে হচ্ছে এটি আমি যা চাই ঠিক তাই করব । ধন্যবাদ!

— ডেভিড ওলবার

ক্রোমে কাজ করে! ভালোবাসা যে এটি সম্ভব!

— বিটি

পয়েন্টার ইভেন্ট পলিফিল রয়েছে: github.com/kmewhort/pointer_events_polyfill

— rink.attendant.6

সবচেয়ে সহজ এবং সবচেয়ে স্ট্রেইট উত্তর!

— জোন্স জি

Answer 2

আপনি অস্থায়ীভাবে ওভারলেটি আড়াল করার পরে ইভেন্টটিকে পুনর্বিবেচিত করে এটি করা যেতে পারে।

এই প্রশ্নের প্রথম উত্তরটি দেখুন: এইচটিএমএল "ওভারলে" যা ক্লিকগুলি এর পিছনের উপাদানগুলির মধ্যে পড়তে দেয়

Answer 3

আপনি এটির মতো ওভারলেটি লুকিয়ে এটি করতে পারেন:

overlay.onclick = function(){
    window.event.srcElement.style.visibility = "hidden";
    var BottomElement = document.elementFromPoint((navigator.appName.substring(0,3) == "Net") ? e.clientX : window.event.x,(navigator.appName.substring(0,3) == "Net") ? e.clientY : window.event.y);
    window.event.srcElement.style.visibility = "visible";
    BottomElement.click();
}

Answer 4

এই jQuery ব্যবহার করুন

$("div").click(function(e){e.preventDefault();});

আইডি বা উপাদান দিয়ে "ডিভ" প্রতিস্থাপন করুন

Answer 5

ডিভের উপর সমস্ত ইভেন্ট (বা কুক্কুট) অক্ষম করার বিকল্প হ'ল ডিফল্টরূপে ট্যাগগুলির সাথে সংযুক্ত সমস্ত ইভেন্ট আনবাইন্ড ()

  $('#myDivId').unbind();

বা

  $('#myDivId').unbind("click");

Comments

jqueryএখন off()পক্ষে পক্ষে ব্যবহার করে unbind(), এবং শুধুমাত্র হ্যান্ডলারগুলি অপসারণ করে, ডিভটি ক্লিকটি ক্যাপচার থেকে বাধা দেয় না।

— pmoleri