একেবারে অবস্থানযুক্ত উপাদানের মাধ্যমে মাউস ইভেন্টগুলি পাস করুন

Question

আমি এর উপরে অন্য একেবারে অবস্থিত উপাদান সহ একটি মৌলটিতে মাউস ইভেন্টগুলি ক্যাপচার করার চেষ্টা করছি।

এই মুহুর্তে, একেবারে অবস্থানযুক্ত উপাদানগুলির ইভেন্টগুলি এটি আঘাত করে এবং তার পিতামাতার কাছে বুদবুদ হয়ে যায় তবে আমি চাই যে এই মাউস ইভেন্টগুলিতে এটি "স্বচ্ছ" হোক এবং এর পিছনে যা আছে তা এগুলি ফরোয়ার্ড করুন। আমি কীভাবে এটি বাস্তবায়ন করব?

Answer 1

pointer-events: none;

একটি CSS বৈশিষ্ট্য যা ইভেন্টগুলিকে প্রয়োগ করা হয় এমন উপাদানটিকে "পাস" করে তোলে এবং ইভেন্টটিকে "নীচে" উপাদানটিতে ঘটায়।

বিশদের জন্য দেখুন: https://developer.mozilla.org/en/css/pointer-events

এটি আইই 11 পর্যন্ত সমর্থিত নয়; অন্যান্য সমস্ত বিক্রেতারা একে একে বেশ কয়েকটি সময় ধরে সমর্থন করে (12 / '16 সালে বিশ্বব্যাপী সমর্থন ছিল 92% ডলার ): http://caniuse.com/#feat=pointer-events (মন্তব্যগুলিতে লিঙ্কটি সরবরাহ করার জন্য @ s4y ধন্যবাদ) ।

Comments

ধন্যবাদ! এটি আধুনিক (এবং নন-আইই) ব্রাউজারগুলির জন্য একটি নিখুঁত সমাধান। এই প্রশ্নটি পোস্ট করার সময়, আমার মনে হয় না এটি pointer-eventsবিদ্যমান ছিল! আমি গ্রহণযোগ্য উত্তরটি এই মুহুর্তে কোনও একটিতে স্যুইচ করতে পারি।

— s4y

ওহ, এটি কেবল আমার ঘন্টা বাঁচিয়েছে।

— ড্যান আব্রামভ

আমি কেবল এইটির গৃহীত উত্তরটি স্যুইচ করেছি। সমর্থন pointer-events এখনও দুর্দান্ত দুর্দান্ত নয় , তবে এটি আরও ভাল হচ্ছে। আরও সামঞ্জস্যপূর্ণ বিকল্পের জন্য, @ জেডস্কমিট এর উত্তর সহ যান।

— s4y

ধন্যবাদ, আমি জানতাম না যে এটি আসলেই আছে। এটি আমার ঘন্টা বাঁচিয়েছিল

— মোহাম্মদ এ। আল জামা

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

— অ্যান্ড্রয়েডদেভ

Answer 2

আপনার যা যা প্রয়োজন তা স্থির করে যদি করা হয় তবে আপনি document.elementFromPointপদ্ধতিটি দিয়ে করতে সক্ষম হবেন :

1. মাউসডাউন উপরের স্তর অপসারণ,
2. ইভেন্টটি থেকে পদ্ধতিতে নীচের অংশটি পেতে xএবং yস্থানাঙ্কগুলি পাস করা document.elementFromPointএবং তারপরে
3. উপরের স্তর পুনরুদ্ধার।

Comments

এখানে আরও শব্দাত্মক

— নাথান

আশ্চর্যজনক, আমি জানতাম না যে পদ্ধতিটিও বিদ্যমান ছিল! এটি শীর্ষস্থানীয় উপাদান পেতে কিছুক্ষণ লুপ ব্যবহার করে কার্সারের অধীনে সমস্ত উপাদান পেতে খুব সহজেই ব্যবহার করা যেতে পারে এবং তারপরে পরবর্তীটি সন্ধান করার জন্য এটি লুকিয়ে রাখুন। এখানে আমার সংস্করণটি ধরুন

— jpeltoniemi

এই কর্মক্ষেত্রের সমস্যাটি হ'ল এটি পৃষ্ঠা জুম করে কাজ করে না। XY স্থানাঙ্কগুলিতে জুম করা মোবাইল ডিভাইস বা ডেস্কটপ ব্রাউজারগুলির জন্য আর কোনও অর্থ নেই এবং জুম গণনা করার কোনও সুস্পষ্ট উপায় নেই। আমি বিশ্বাস করি চিমটি জুম করার পক্ষে এটি অসম্ভব।

— Impossibear

Answer 3

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

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

<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

দুর্দান্ত, আবিষ্কারের ঠিক পরে pointer-events:noneএবং শিশুদের নোডগুলি প্রভাবিত করার আসন্ন লেট-ডাউনের পরে , আপনি দিনটি বাঁচান :)

— হুয়ান কর্টেস

;) এ সম্পর্কে খুব আনন্দিত

— অ্যালিসোন

এটি কি কেবল সিদ্ধ করা যায়: .parent * { pointer-events:all; }বাচ্চাদের জন্য?

— দিমিত্রি

এটি "পয়েন্টার-ইভেন্টস: অটো;" হওয়া উচিত। "সমস্ত" মানটি কেবল এসভিজিকেই প্রযোজ্য। বিকাশকারী.মোজিলা.আর.এন.এন.ইউএস

— ডকস

Answer 4

আপনি ইভেন্টটি না পাবার কারণ হ'ল একেবারে অবস্থানযুক্ত উপাদানটি যে উপাদানটির "ক্লিক" (নীল ডিভি) করতে চান আপনি তার সন্তানের নন। আমি সবচেয়ে পরিষ্কার ভাবে ভাবতে পারি যে আপনি ক্লিক করতে চান তার সন্তানের মতো পরম উপাদানটি রাখা, তবে আমি ধরে নিচ্ছি যে আপনি এটি করতে পারবেন না বা আপনি এই প্রশ্নটি এখানে পোস্ট করেন নি :)

অন্য বিকল্পটি হ'ল পরম উপাদানটির জন্য ক্লিক ইভেন্ট হ্যান্ডলারের নিবন্ধন করা এবং নীল ডিভের জন্য ক্লিক হ্যান্ডলারের কল করা, যার ফলে উভয় ফ্ল্যাশ হয়ে যায়।

যেভাবে ইভেন্টগুলি ডম-এর মাধ্যমে উত্সাহিত করবে সে কারণে আমি নিশ্চিত নই যে আপনার জন্য একটি সহজ উত্তর রয়েছে, তবে আমি যদি অন্য কারও কাছে এমন কৌশল অবলম্বন করি তবে আমি খুব আগ্রহী!

Comments

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

— s4y

Answer 5

একটি জাভাস্ক্রিপ্ট সংস্করণ উপলব্ধ আছে যা ম্যানুয়ালি ইভেন্টগুলিকে এক ডিভ থেকে অন্য বিভাগে পুনঃনির্দেশ করে।

আমি এটি পরিষ্কার করে এটিকে একটি jQuery প্লাগইনে পরিণত করেছি।

এখানে গিথুব সংগ্রহস্থল: https://github.com/BaronVonSmeaton/jquery.forwardevents

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

Answer 6

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