অন্তর্নিহিত উপাদানগুলিতে ডিভের মাধ্যমে ক্লিক করুন

Question

আমি একটি আছে divআছে background:transparent, সঙ্গে বরাবর border। এর নীচে divআমার আরও উপাদান রয়েছে।

বর্তমানে, আমি যখন ওভারলে এর বাইরে ক্লিক করি তখন আমি অন্তর্নিহিত উপাদানগুলিতে ক্লিক করতে সক্ষম div। তবে সরাসরি ওভারলেতে ক্লিক করার সময় আমি অন্তর্নিহিত উপাদানগুলিতে ক্লিক করতে অক্ষম div।

আমি এর মাধ্যমে ক্লিক করতে সক্ষম হতে চাই divযাতে আমি অন্তর্নিহিত উপাদানগুলিতে ক্লিক করতে পারি।

Answer 1

হ্যাঁ, আপনি এটি করতে পারেন ।

ব্যবহার pointer-events: noneIE11 জন্য CSS শর্তাধীন বিবৃতি সাথে (IE10 অথবা নীচের কাজ করে না), আপনি এ সমস্যার জন্য একটি ক্রস ব্রাউজার সামঞ্জস্যপূর্ণ সমাধান পেতে পারেন।

ব্যবহার করে AlphaImageLoader, আপনি এমনকি .PNG/.GIFওভারলেতে স্বচ্ছ গুলি রাখতে divপারেন এবং নীচের উপাদানগুলিতে ক্লিকগুলি প্রবাহিত করতে পারেন।

সিএসএস:

pointer-events: none;
background: url('your_transparent.png');

আইই ১১ শর্তসাপেক্ষ:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;

এখানে সমস্ত কোড সহ একটি বেসিক উদাহরণ পৃষ্ঠা রয়েছে।

Comments

আমি যদি সেই ডিভিজে ট্রানজিশন বা হোভার-স্টেটস ব্যবহার করছি?

— মান্টিকোর

@ ম্যান্টিকোর সংক্ষিপ্ত উত্তর: আপনি পারবেন না। এই ক্ষেত্রে প্রদত্ত উত্তর কাজ করে না।

— নীলস অ্যাবিল্ডগার্ড

আইই 11 পুরোপুরি পয়েন্টার-ইভেন্টগুলিকে সমর্থন করে। এর অর্থ সমস্ত আধুনিক ব্রাউজার এটি সমর্থন করে। 2014 সালের শেষের দিকে এটি একটি কার্যক্ষম

— এহুদা গ্যাব্রিয়েল হিমাঙ্গো

@ অ্যান্ডি দ্বারা উল্লিখিত হিসাবে, এটি স্ক্রোলিং বিরতি দেয়। এই স্ট্যাকওভারফ্লো.com

— অলিভার জোসেফ অ্যাশ

@ ম্যান্টিকোর আমি খুঁজে পেয়েছি যে আপনি "পয়েন্টার-ইভেন্টগুলি: কিছুই নয়" ওভাররাইট করতে পারেন নেস্টেড এলিমেন্টের জন্য, যাতে ক্লিক করে কিছু বাইপাস করে কিছু লিখতে পারেন যা ক্লিক পেতে পারে এবং ওভাররাইট করা অংশগুলির জন্য আপনি প্রভাবগুলি ব্যবহার করতে পারেন এবং ক্লিক করতে পারেন

— লুকা সি

Answer 2

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

এর জন্য সমস্ত প্যারেন্টিং ডিভগুলি পেয়ে যায় pointer-events: noneএবং এর ক্লিকযোগ্য শিশুরা পয়েন্টার-ইভেন্টগুলি পুনরায় সক্ষম করেpointer-events: auto

.parent {
    pointer-events:none;        
}
.child {
    pointer-events:auto;
}

<div class="some-container">
   <ul class="layer-0 parent">
     <li class="click-me child"></li>
     <li class="click-me child"></li>
   </ul>

   <ul class="layer-1 parent">
     <li class="click-me-also child"></li>
     <li class="click-me-also child"></li>
   </ul>
</div>

Comments

পারফেক্ট, এটি আমার প্রয়োজন মাত্র!

— রবিবিরেইন্ডার

সুপার সহায়ক, ধন্যবাদ

— স্পেসবার ভালে

Answer 3

divঅন্তর্নিহিত উপাদানটিতে ব্যবহারকারীকে ক্লিক করতে দেওয়া ব্রাউজারের উপর নির্ভর করে। ফায়ারফক্স, ক্রোম, সাফারি এবং অপেরা সহ সমস্ত আধুনিক ব্রাউজারগুলি বুঝতে পারে pointer-events:none।

IE এর জন্য, এটি পটভূমির উপর নির্ভর করে। যদি পটভূমিটি স্বচ্ছ হয়, আপনার কিছুই করার দরকার না হলে ক্লিকথ্রু কাজ করে। অন্যদিকে, এর মতো কিছু জন্য background:white; opacity:0; filter:Alpha(opacity=0);, IE এর ম্যানুয়াল ইভেন্ট ফরওয়ার্ডিং প্রয়োজন।

দেখুন একটি JSFiddle পরীক্ষা এবং CanIUse পয়েন্টার ঘটনা ।

Answer 4

আমি এই উত্তরটি যুক্ত করছি কারণ আমি এখানে এটি পুরোপুরি দেখিনি। আমি উপাদান ফর্মপয়েন্ট ব্যবহার করে এটি করতে সক্ষম হয়েছি। সুতরাং মূলত:

• আপনি যে ডিভের মাধ্যমে ক্লিক করতে চান তাতে একটি ক্লিক সংযুক্ত করুন
• এটা লুকানোর
• নির্দেশকটি কোন উপাদানটিতে রয়েছে তা নির্ধারণ করুন
• সেখানে উপাদান এ ক্লিক করুন।

var range-selector= $("")
    .css("position", "absolute").addClass("range-selector")
    .appendTo("")
    .click(function(e) {
        _range-selector.hide();

        $(document.elementFromPoint(e.clientX,e.clientY)).trigger("click");
    });

আমার ক্ষেত্রে ওভারলেয়িং ডিভটি একেবারে অবস্থিত — আমি নিশ্চিত নই যে এটি কোনও পার্থক্য করে কিনা। এটি IE8 / 9, সাফারি ক্রোম এবং ফায়ারফক্সে অন্তত কাজ করে।

Answer 5

1. উপাদানটি ওভারলেলিং লুকান
2. কার্সার স্থানাঙ্ক নির্ধারণ করুন
3. সেই স্থানাঙ্কগুলিতে উপাদান পান
4. উপাদানটিতে ট্রিগার ক্লিক করুন
5. ওভারলেয়িং উপাদানটি আবার দেখান

$('#elementontop').click(e => {
    $('#elementontop').hide();
    $(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
    $('#elementontop').show();
});

Comments

আপনি কি এস্টোস্ট্রোফ বন্ধ করতে ভুলে গেছেন? হতে $('#elementontop)হবে $('#elementontop')?

— জোহাঁঞ্চোপিন

Answer 6

আমার এটি করা দরকার এবং এই পথটি নেওয়ার সিদ্ধান্ত নিয়েছি:

$('.overlay').click(function(e){
    var left = $(window).scrollLeft();
    var top = $(window).scrollTop();

    //hide the overlay for now so the document can find the underlying elements
    $(this).css('display','none');
    //use the current scroll position to deduct from the click position
    $(document.elementFromPoint(e.pageX-left, e.pageY-top)).click();
    //show the overlay again
    $(this).css('display','block');
});

Answer 7

আমি বর্তমানে ক্যানভাস স্পিচ বেলুনগুলি নিয়ে কাজ করি। তবে পয়েন্টারের সাথে বেলুনটি একটি ডিভের মধ্যে আবৃত থাকার কারণে, এর অধীনে কিছু লিঙ্কগুলি আর ক্লিক করতে সক্ষম নয়। আমি এই ক্ষেত্রে এক্সট্রা ব্যবহার করতে পারি না। আমার স্পিচ বেলুন টিউটোরিয়ালটির জন্য বেসিক উদাহরণটি দেখুন HTML5

সুতরাং আমি সিদ্ধান্ত নিয়েছি যে কোনও অ্যারেতে বেলুনগুলির ভিতরে থেকে সমস্ত লিঙ্ক স্থানাঙ্ক সংগ্রহ করব।

var clickarray=[];
function getcoo(thatdiv){
         thatdiv.find(".link").each(function(){
                 var offset=$(this).offset();           
                 clickarray.unshift([(offset.left),
                                     (offset.top),
                                     (offset.left+$(this).width()),
                                     (offset.top+$(this).height()),
                                     ($(this).attr('name')),
                                     1]);
                                     });
         }

আমি প্রতিটি (নতুন) বেলুনে এই ফাংশনটি কল করি। এটি কোনও লিঙ্কক্লাসের বাম / উপরে এবং ডান / নীচের কোণগুলির স্থানাঙ্কগুলি ধরে ফেলে - অতিরিক্তভাবে কেউ যদি সেই স্থানাঙ্কগুলিতে ক্লিক করে তবে কী করতে হবে নামটির বৈশিষ্ট্য এবং আমি একটি 1 সেট করতে পছন্দ করি যার অর্থ এটি জেটে ক্লিক করা হয়নি was । এবং এই অ্যারেটি ক্লিকেরে আনশিফ্ট করুন। আপনি খুব ধাক্কা ব্যবহার করতে পারে।

সেই অ্যারের সাথে কাজ করতে:

$("body").click(function(event){
          event.preventDefault();//if it is a a-tag
          var x=event.pageX;
          var y=event.pageY;
          var job="";
          for(var i in clickarray){
              if(x>=clickarray[i][0] && x<=clickarray[i][2] && y>=clickarray[i][1] && y<=clickarray[i][3] && clickarray[i][5]==1){
                 job=clickarray[i][4];
                 clickarray[i][5]=0;//set to allready clicked
                 break;
                }
             }
          if(job.length>0){   
             // --do some thing with the job --
            }
          });

এই ফাংশনটি বডি ক্লিক ইভেন্টের স্থানাঙ্কের প্রমাণ দেয় বা এটি ইতিমধ্যে ক্লিক করা হয়েছিল এবং নামটির বৈশিষ্ট্যটি ফিরিয়ে দেয়। আমি মনে করি এটি আরও গভীর হওয়া প্রয়োজন হয় না, তবে আপনি দেখেন যে এটি জটিল নয়। আশা ছিল আনন্দিত ...

Answer 8

এটি সেভাবে কাজ করে না। চারপাশের কাজটি হ'ল প্রতিটি উপাদান দ্বারা দখল করা ক্ষেত্রের বিরুদ্ধে মাউস ক্লিকের স্থানাঙ্কগুলি ম্যানুয়ালি পরীক্ষা করা।

কোনও উপাদান দ্বারা দখলকৃত অঞ্চলটি ১ দ্বারা পাওয়া যাবে the পৃষ্ঠার উপরের বাম দিকের সাথে উপাদানটির অবস্থান এবং প্রস্থ এবং উচ্চতা। জিকুয়ের মতো লাইব্রেরি এটি বেশ সহজ করে তোলে যদিও এটি সাধারণ জেএসে করা যায় in জন্য একটি ইভেন্ট হ্যান্ডলার যোগ mousemoveউপর documentবস্তু উপর থেকে মাউস অবস্থানের একটানা আপডেট এবং পৃষ্ঠার বাম হবে। মাউস কোনও প্রদত্ত বস্তুর উপরে রয়েছে কিনা তা স্থির করে মাউসের অবস্থানটি কোনও এলিমেন্টের বাম, ডান, উপরের এবং নীচের প্রান্তের মধ্যে রয়েছে কিনা তা পরীক্ষা করে গঠিত।

Comments

উপরে উল্লিখিত হিসাবে, আপনি আপনার স্বচ্ছ ধারকটিতে সিএসএস {পয়েন্টার-ইভেন্টগুলি: কিছুই নয় using ব্যবহার করে এটি অর্জন করতে পারেন।

— এম্পেরল

Answer 9

না, আপনি কোনও উপাদানটির মাধ্যমে 'ক্লিক' করতে পারবেন না। আপনি ক্লিকের সমবায় পেতে পারেন এবং ক্লিক করা উপাদানের নীচে কী উপাদানটি ছিল তা চেষ্টা করার চেষ্টা করতে পারেন, তবে ব্রাউজারগুলির জন্য এটি সত্যিই ক্লান্তিকর document.elementFromPoint। তারপরে আপনাকে এখনও ক্লিকের ডিফল্ট ক্রিয়াটি অনুকরণ করতে হবে যা আপনার সেখানে থাকা উপাদানগুলির উপর নির্ভর করে অপ্রয়োজনীয় নয়।

যেহেতু আপনি একটি সম্পূর্ণ স্বচ্ছ উইন্ডো অঞ্চল পেয়েছেন, তাই সম্ভবত আপনি এটিকে বাইরের চারপাশে পৃথক সীমান্ত উপাদান হিসাবে প্রয়োগ করে আরও ভাল হয়ে উঠবেন, কেন্দ্র অঞ্চলটি কোনও বাধা মুক্ত রাখবেন যাতে আপনি সত্যিই সরাসরি সরাসরি ক্লিক করতে পারেন।

Answer 10

(পরিস্থিতিগতভাবে) চেষ্টা করার অন্য একটি ধারণাটি হ'ল:

1. আপনার পছন্দের সামগ্রীটি একটি ডিভিতে রাখুন;
2. জে-ইনডেক্স উচ্চতর দিয়ে পুরো পৃষ্ঠার উপরে অ-ক্লিকের ওভারলে রাখুন,
3. মূল ডিভের আরেকটি ক্রপযুক্ত অনুলিপি তৈরি করুন
4. ওভারলে এবং এ্যাবসকে এমন কোনও স্থানে অনুলিপি ডিভ অবস্থানের মূল স্থানে আপনি আরও উচ্চতর জেড-সূচক দিয়ে ক্লিকযোগ্য হতে চান?

কোন চিন্তা?

Answer 11

আমি মনে করি আপনি নিজের মার্কআপ পরিবর্তন করার বিষয়ে বিবেচনা করতে পারেন। আমি যদি ভুল না হয়ে থাকি তবে আপনি নথির উপরে একটি অদৃশ্য স্তর রাখতে চান এবং আপনার অদৃশ্য মার্কআপটি আপনার দস্তাবেজের চিত্রের আগে থাকতে পারে (এটি কি সঠিক?)

পরিবর্তে, আমি প্রস্তাব দিচ্ছি যে আপনি নথির চিত্রের পরেও অদৃশ্যটি ঠিক রেখেছেন তবে অবস্থানটি পরমকে পরিবর্তন করছেন।

লক্ষ্য করুন যে আপনার অবস্থানের জন্য পিতামাতার উপাদান প্রয়োজন: আপেক্ষিক এবং তারপরে আপনি এই ধারণাটি ব্যবহার করতে সক্ষম হবেন। অন্যথায় আপনার পরম স্তরটি কেবল উপরের বাম কোণে স্থাপন করা হবে।

স্থায়ী ব্যতীত অন্য অবস্থানের সাথে প্রথম প্যারেন্ট উপাদানটির তুলনায় একটি পরম অবস্থান উপাদান অবস্থান করে is যদি এই জাতীয় কোনও উপাদান খুঁজে পাওয়া যায় না, তবে এটির ব্লকটি এইচটিএমএল

আশাকরি এটা সাহায্য করবে. সিএসএস অবস্থান সম্পর্কিত আরও তথ্যের জন্য এখানে দেখুন ।

Answer 12

aউদাহরণস্বরূপ, সমস্ত এইচটিএমএল এক্সট্র্যাক্টের চারদিকে কেবল ট্যাগটি মোড়ানো

<a href="/categories/1">
  <img alt="test1" class="img-responsive" src="/assets/photo.jpg" />
  <div class="caption bg-orange">
    <h2>
      test1
    </h2>
  </div>
</a>

আমার উদাহরণে আমার ক্যাপশন শ্রেণিতে প্রভাব রয়েছে, যা পয়েন্টার-ইভেন্টগুলির সাথে: কোনওটি নয়; আপনি শুধু হারাতে হবে

সামগ্রী মোড়ানো আপনার প্রভাবগুলি রাখে এবং আপনি সমস্ত ছবিতে ক্লিক করতে পারেন, ডিভ অন্তর্ভুক্ত, শুভেচ্ছা!

Comments

ভাল যুক্তি! ধন্যবাদ

— মিঃ ভারটিগো

Answer 13

আপনি যেমন একটি এপি ওভারলে রাখতে পারেন ...

#overlay {
  position: absolute;
  top: -79px;
  left: -60px;
  height: 80px;
  width: 380px;
  z-index: 2;
  background: url(fake.gif);
}

<div id="overlay"></div>

যেখানে আপনি চাইছেন না ঠিক সেখানে ক্লিকেড রেখে দিন। সব মিলিয়ে কাজ করে।

Answer 14

নিম্নরূপে ডেটা ইউআরআই ব্যবহার করে স্বচ্ছ পটভূমি চিত্রটি ইনলাইন করা সহজ উপায় হ'ল:

.click-through {
    pointer-events: none;
    background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

Answer 15

আমি মনে করি event.stopPropagation();এখানেও উল্লেখ করা উচিত। আপনার বোতামটির ক্লিক ফাংশনে এটি যুক্ত করুন।

কোনও পিতামাত্ত হ্যান্ডলারকে ইভেন্টটি সম্পর্কে অবহিত করা থেকে বাঁচিয়ে, ডিওএম ট্রিটি বুদ্বুদ করা থেকে ইভেন্টটিকে আটকায়।

Answer 16

এটি প্রশ্নের সুনির্দিষ্ট উত্তর নয় তবে এটির জন্য কার্যকারিতা খুঁজে পেতে সহায়তা করতে পারে।

আমার একটি চিত্র ছিল যা আমি পৃষ্ঠা লোডে লুকিয়ে ছিলাম এবং যখন এজেএক্স কলটির জন্য অপেক্ষা করছিলাম তখন আবার লুকিয়ে থাকব ...

পৃষ্ঠাটি লোড করার সময় আমি আমার চিত্রটি প্রদর্শন করার একমাত্র উপায় খুঁজে পেয়েছি তবে এটি অদৃশ্য হয়ে যাবে এবং যে চিত্রটি লুকিয়ে রাখার আগে এটি যেখানে ছিল সেখানে ক্লিক করতে সক্ষম হ'ল চিত্রটি ডিআইভিতে রাখা, ডিআইভি 10x10 পিক্সেল বা ছোট আকারের করা এটি একটি সমস্যা সৃষ্টি করে এবং এর মধ্যে থাকা ডিভটি লুকিয়ে রাখার জন্য যথেষ্ট। এটি চিত্রটি দৃশ্যমান অবস্থায় ডিভটিকে উপচে ফেলেছিল এবং যখন ডিভটি লুকানো ছিল, কেবল ডিভস অঞ্চলটি নীচের অংশগুলিতে ক্লিক করতে অক্ষমতায় প্রভাবিত হয়েছিল এবং ডিআইভি উপস্থিত চিত্রটির পুরো আকার নয় এবং প্রদর্শন করছে।

আমি সিএসএস প্রদর্শন = কিছুই নয় / ব্লক, অস্বচ্ছতা = 0 সহ চিত্রটি আড়াল করার জন্য সমস্ত পদ্ধতির চেষ্টা করেছি, লুকানো = সত্য দিয়ে চিত্রটি আড়াল করছি। তাদের সমস্তের ফলে আমার চিত্রটি লুকানো ছিল তবে যে জায়গাতে এটি প্রদর্শিত হয়েছিল সেখানে ক্লিকের নীচে স্টাফের উপর একটি কভার ছিল এবং তাই অন্তর্নিহিত বস্তুগুলিতে কাজ করবে না। একবার চিত্রটি একটি ক্ষুদ্র ডিআইভির অভ্যন্তরে ছিল এবং আমি ক্ষুদ্র ডিআইভি লুকিয়ে রাখলাম, ইমেজটির দ্বারা দখল করা পুরো অঞ্চলটি পরিষ্কার ছিল এবং আমি যে ডিআইভি লুকিয়ে রেখেছিলাম তার নীচে কেবল ক্ষুদ্র অঞ্চলই ক্ষতিগ্রস্থ হয়েছিল তবে আমি এটি যথেষ্ট ছোট করে দিয়েছি (10x10 পিক্সেল), ইস্যুটি স্থির ছিল (সাজানো)।

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