আই সি এর জন্য 'পয়েন্টার-ইভেন্টস' সম্পত্তি বিকল্প property

Question

আমার একটি ড্রপ ডাউন নেভিগেশন মেনু রয়েছে যাতে ক্লিক করা অবস্থায় শিরোনামের কিছু অন্য পৃষ্ঠায় নেভিগেট করা উচিত নয় (অন্যদের নেভিগেট করার সময় এই শিরোনামটি একটি ড্রপ ডাউন মেনু খুলবে) অন্যদের নেভিগেট করা উচিত these তবে উভয়ই উভয়ই প্রকারগুলি তাদের hrefসংজ্ঞায়িত করেছে

এটি সমাধান করার জন্য আমি প্রাক্তন ধরণের শিরোনামগুলির জন্য নিম্নলিখিত সিএসএস যুক্ত করেছি

pointer-events: none;

এবং এটি ঠিকঠাকভাবে কাজ করছে ut তবে যেহেতু এই সম্পত্তিটি IE দ্বারা সমর্থিত নয়, তাই আমি কিছু কাজের জন্য খুঁজছি। বিরক্তিকর বিষয় হ'ল এইচটিএমএল এবং জাভাস্ক্রিপ্ট কোড সম্পূর্ণরূপে পরিবর্তন করার মতো অ্যাক্সেস এবং অধিকার আমার কাছে নেই ।

কোন ধারনা?

Comments

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

— কাইল

@ কাইল এটি ঠিক সুযোগ সুবিধার সমস্যা নয়, এইচটিএমএল / জাভাস্ক্রিপ্ট কোডটি সংশোধন করার জন্য কিছু প্রযুক্তিগত সমস্যা রয়েছে

— অনুপম

উত্তরটি এখানে স্ট্যাকওভারফ্লো

— সংকেত সাহু

stackoverflow.com/questions/3680429/…

— সংকেত সাহু

নোট যে pointer-eventsএখন আই 11 এ আছে +

— ডেভিড স্টোর

Answer 1

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

তবে আমার কাছে একটি সমাধান পাওয়া গেছে:

স্তরগুলির মাধ্যমে মাউস ইভেন্টগুলি ফরওয়ার্ড করছে

এটি একটি প্লাগইন ব্যবহার করে যা মাউস ইভেন্টটি নিতে এবং এটি অন্য উপাদানটিতে প্রেরণে জাভাস্ক্রিপ্টের কিছু জানা / না বোঝা বৈশিষ্ট্য ব্যবহার করে।

এখানে আরও একটি জাভাস্ক্রিপ্ট সমাধান রয়েছে ।

অক্টোবর 2013 এর জন্য আপডেট : দৃশ্যত এটি v11 এ আই-তে আসছে। উত্স । ধন্যবাদ টিম

Comments

আই 9 এর ডকুমেন্টেশন বলে যে এটি এই সম্পত্তিটিকে সমর্থন করে (যদিও আমি ie9 চেষ্টা করি নি) তবে যাইহোক, আমার মনের মধ্যে ইতিমধ্যে ধারণা ছিল যা লিঙ্কগুলিতে দেওয়া আছে তবে আমি কিছু সিএসএস নির্দিষ্ট সমাধান খুঁজছিলাম বলে আমি সেগুলি ব্যবহার করতে পারি না। আমি এই সমস্যায় সময় কাটানোর পরিবর্তে এইচটিএমএল / জেএস কোডটি সংশোধন করার চেষ্টা করব

— your

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

— ভলকান রেভেন

ক্যানিউজ২৪.কম অনুসারে, সিএসএস পয়েন্টার ইভেন্টগুলি আইই ১১ এ চলেছে

— টিম

এটিকে কোনও উত্তর হ্রাস করার কারণ নয় @eyordakul

— স্কুমাহ

"you can't expect to see it in IE browsers for another million years."মাত্র 3 বছর সময় নিয়েছে ...

— সমস্যাগুলি

Answer 2

এখানে আরও একটি সমাধান যা 5 লাইন কোডের সাথে কার্যকর করা খুব সহজ:

1. শীর্ষ উপাদানটির জন্য 'মোডাউনডাউন' ইভেন্টটি ক্যাপচার করুন (যে উপাদানটি আপনি পয়েন্টার ইভেন্টগুলি বন্ধ করতে চান)।
2. 'মোসডাউন' এ শীর্ষ উপাদানটি আড়াল করুন।
3. অন্তর্নিহিত উপাদানটি পেতে 'ডকুমেন্ট.ইলেটমেন্ট ফ্রমপয়েন্ট ()' ব্যবহার করুন।
4. শীর্ষ উপাদানটি প্রদর্শন করুন।
5. অন্তর্নিহিত উপাদানটির জন্য কাঙ্ক্ষিত ইভেন্টটি সম্পাদন করুন।

উদাহরণ:

//This is an IE fix because pointer-events does not work in IE
$(document).on('mousedown', '.TopElement', function (e) {

    $(this).hide();
    var BottomElement = document.elementFromPoint(e.clientX, e.clientY);
    $(this).show();
    $(BottomElement).mousedown(); //Manually fire the event for desired underlying element

    return false;

});

Comments

এটি আমার পক্ষে কাজ করেছে। আমি ছোট ফিক্সগুলি পছন্দ করি যা আমি আমার জেএস কোডের পরিবর্তে প্রচুর পরিমাণে পলিফিল যোগ করতে পারি;)

— ডিপ্পাস

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

— ট্রেভর

আমি একমত, এটি একটি বিভ্রান্তিকর সমস্যার দ্রুত বাস্তবায়নযোগ্য, তবে বাস্তবে এটি বাস্তবায়নের ক্ষেত্রে আমি কেবল তখনই এটি প্রয়োগ করি যদি ব্রাউজারটি হয়, আপনি এটি এই চেকের মধ্যে রাখেন: যদি (নেভিগেটর.এপনেম == 'মাইক্রোসফ্ট ইন্টারনেট এক্সপ্লোরার' ) {... যুক্তি এখানে চলে ..}

— মারজসকস

এটি খুব ভাল কাজ করে! যেহেতু অর্থাত্ 11 টি পয়েন্টার-ইভেন্টগুলিকে সমর্থন করা শুরু করেছে, আমি কেবলমাত্র এই ধারাটির মধ্যে এটি আবদ্ধ করি: যদি (নেভিগেটর.উজারএজেন্ট.টোলওয়ারকেস ()। সূচিপত্র ('এমএসআই')> 0) ধন্যবাদ!

— হাঙ্ক

Answer 3

IE এর জন্য একটি কার্যকারিতা রয়েছে - এসভিজিতে ইনলাইন এসভিজি এবং পয়েন্টার-ইভেন্টগুলি = "কিছুই নয়" সেট করুন। আমার উত্তর দেখুন কীভাবে ইন্টারনেট এক্সপ্লোরার পয়েন্টার-ইভেন্টগুলি অনুকরণ করতে পারে: কোনওটি নয়?

Comments

এটি কিছু ক্ষেত্রে দুর্দান্ত সমাধান তবে আমি এটি আমার ক্ষেত্রে এটি ব্যবহার করতে পারি না।

— eyurdul

Answer 4

এটি উল্লেখযোগ্য যে বিশেষত আই আই এর disabled=disabledজন্য, অ্যাঙ্কর ট্যাগগুলির জন্য কাজ করে:

<a href="contact.html" onclick="unleashTheDragon();" disabled="disabled">Contact</a>

IE এটিকে disabledউপাদান হিসাবে বিবেচনা করে এবং ক্লিক ইভেন্টকে ট্রিগার করে না। তবে, disabledঅ্যাঙ্কর ট্যাগে কোনও বৈধ বৈশিষ্ট্য নয়। সুতরাং এটি অন্যান্য ব্রাউজারগুলিতে কাজ করবে না। তাদের pointer-events:noneজন্য স্টাইলিংয়ে প্রয়োজনীয়।

আপডেট 1 : সুতরাং নিম্নলিখিত নিয়মটি যুক্ত করা আমার কাছে ক্রস ব্রাউজার সমাধানের মতো মনে হয়

আপডেট 2 : আরও সামঞ্জস্যের জন্য, কারণ আইই অ্যাঙ্কর ট্যাগগুলির জন্য স্টাইল গঠন করবে না disabled='disabled', তাই তারা এখনও সক্রিয় দেখায় । সুতরাং, a:hover{}নিয়ম এবং স্টাইলিং একটি ভাল ধারণা:

a[disabled="disabled"] {
        pointer-events: none; /* this is enough for non-IE browsers */
        color: darkgrey;      /* IE */
    }
        /* IE - disable hover effects */   
        a[disabled="disabled"]:hover {
            cursor:default;
            color: darkgrey;
            text-decoration:none;
        }

Chrome, IE11 এবং IE8 এ কাজ করা।
অবশ্যই, উপরের সিএসএস ধরে ধরেছে অ্যাঙ্কর ট্যাগগুলি রেন্ডার করা হয়disabled="disabled"

Comments

এটি আমার পক্ষে কাজ করে না। IE9-10 এ অনক্লিক ফাংশনগুলি এখনও কার্যকর হয় do

— অবশ্যই

Answer 5

এই বৈশিষ্ট্যটি বাস্তবায়নের জন্য এখানে একটি ছোট স্ক্রিপ্ট রয়েছে ( কাইল উল্লেখ করেছেন শেয়া ফ্রেডরিক ব্লগ নিবন্ধ থেকে অনুপ্রাণিত ):

• পয়েন্টার ইভেন্টস পলিফিল ।

Comments

উপাদানগুলি অ্যাঙ্কর ট্যাগ হলে এটি কাজ করে না, আমি বিশ্বাস করি। কমপক্ষে, এটি আমার পক্ষে কার্যকর হয়নি।

— কলিন ডেক্লু

Answer 6

সিউডো উপাদানটি ব্যবহার করে আপত্তিকর উপাদানগুলিকে একটি অদৃশ্য ব্লক দিয়ে আবরণ করুন: :beforeবা:after

a:before {
//IE No click hack by covering the element.
  display:block;
  position:absolute;
  height:100%;
  width:100%;
  content:' ';
}

সুতরাং আপনি প্যারেন্ট এলিমেন্টের উপর ক্লিক করুন জমি। ভাল না, পিতামাতার ক্লিকযোগ্য যদি হয় তবে অন্যথায় ভাল কাজ করে।

Comments

আমি অক্ষম বৈশিষ্ট্যের সাথে একই ধারণা ব্যবহার করেছি। আই-এ অক্ষম বৈশিষ্ট্য যুক্ত করা ক্লিক ইভেন্টগুলি প্রতিরোধ করে, তবে যদি বাচ্চারা থাকে তবে তারা ক্লিকটি ট্রিগার করবে। বাচ্চাদের coveringেকে রাখা যাতে তারা ক্লিকযোগ্য না হয় এটির একটি দুর্দান্ত সমাধান। আইই রেজিস্টার করার জন্য সেখানে একটি আসল উপাদান ছিল আমাকে अस्पष्ट 0 সহ একটি পটভূমি রঙ ব্যবহার করতে হয়েছিল।

— ব্লেক প্লাম্ব

Answer 7

আমি এই সমস্যার সমাধান অনুসন্ধান করতে প্রায় দুই দিন ব্যয় করেছি এবং শেষ পর্যন্ত আমি এটি পেয়েছি।

এটি জাভাস্ক্রিপ্ট এবং jquery ব্যবহার করে।

(গিটহাব) পয়েন্টার_ইভেন্টস_পলিফিল

এটি ডাউনলোড / অনুলিপি করতে জাভাস্ক্রিপ্ট প্লাগ-ইন ব্যবহার করতে পারে। কেবল সেই সাইট থেকে কোডগুলি অনুলিপি / ডাউনলোড করুন এবং এটি সংরক্ষণ করুন pointer_events_polyfill.js। আপনার সাইটে সেই জাভাস্ক্রিপ্ট অন্তর্ভুক্ত করুন।

<script src="JS/pointer_events_polyfill.js></script>

আপনার সাইটে এই jquery স্ক্রিপ্ট যুক্ত করুন

$(document).ready(function(){
    PointerEventsPolyfill.initialize({});
});

এবং আপনার jquery প্লাগ-ইন অন্তর্ভুক্ত করতে ভুলবেন না।

এটি কাজ করে! আমি স্বচ্ছ উপাদানের অধীনে উপাদানগুলিতে ক্লিক করতে পারি। আমি আইই 10 ব্যবহার করছি I আমি আশা করি এটি 9 9 এবং নীচেও কাজ করতে পারে।

সম্পাদনা: আপনি স্বচ্ছ উপাদানের নীচে পাঠ্যবক্সগুলিতে ক্লিক করলে এই সমাধানটি ব্যবহার করা কার্যকর হয় না। এই সমস্যাটি সমাধান করার জন্য, ব্যবহারকারী যখন পাঠ্যবক্সে ক্লিক করেন তখন আমি ফোকাস ব্যবহার করি।

javascript:

document.getElementById("theTextbox").focus();

jQuery:

$("#theTextbox").focus();

এটি আপনাকে পাঠ্যবক্সে পাঠ্য টাইপ করতে দেয়।

Answer 8

আমি এই সমস্যা সমাধানের জন্য আরও একটি সমাধান খুঁজে পেয়েছি। ব্রাউজার উইন্ডোটির প্রস্থ 1'000px এর চেয়ে বেশি হলে আমি href-ট্রিবিউটটি javascript:;('নয়' বা 'ব্রাউজারটি পৃষ্ঠাটি পুনরায় লোড করব) সেট করতে আমি jQuery ব্যবহার করি। আপনার লিঙ্কে আপনাকে একটি আইডি যুক্ত করতে হবে। আমি যা করছি তা এখানে:

// get current browser width
var width = $(window).width();
if (width >= 1001) {

    // refer link to nothing
    $("a#linkID").attr('href', 'javascript:;'); 
}

সম্ভবত এটি আপনার জন্য দরকারী।

Answer 9

ব্যবহার OnClientClick = "return false;"

Answer 10

আপনি <a>ট্যাগের ভিতরে একটি ইউআরএল কেবল "যোগ" করতে পারেন না , আমি <a>ড্রপ ডাউনগুলি দিয়ে চালিত ট্যাগযুক্ত মেনুগুলির জন্য এটি করি । যদি সেখানে ড্রপ ডাউন না হয় তবে আমি ইউআরএল যুক্ত করি তবে <ul> <li>তালিকার সাথে যদি ড্রপ ডাউন হয় তবে আমি কেবল এটি সরিয়ে ফেলব।

Answer 11

আমি একই রকম সমস্যার মুখোমুখি হয়েছি:

1. আমি এই সমস্যার মুখোমুখি হয়েছি, আমি এটির মূল উপাদান হিসাবে যুক্ত করে পয়েন্টার-ইভেন্টগুলি সংশোধন করেছি: এর জন্য কিছুই নয়

2. উপরের ফিক্সটি নির্বাচিত ট্যাগের জন্য কাজ করে না, তারপরে আমি কার্সার যুক্ত করেছি: পাঠ্য (যা আমি চাইছিলাম) এবং এটি আমার জন্য কাজ করেছিল

যদি একটি সাধারণ কার্সার প্রয়োজন হয় তবে আপনি কার্সার যুক্ত করতে পারেন : ডিফল্ট

Answer 12

সব থেকে ভালো সমাধান:

.disabled{filter: alpha(opacity=50);opacity: 0.5;z-index: 1;pointer-events: none;}

সমস্ত ব্রাউজারে পুরোপুরি চলে

Comments

আইই সংস্করণ <11 বাদে যেখানে পয়েন্টার ইভেন্টগুলি সমর্থন করে না। আমি মনে করি তুমি অংশটি অতিক্রম করেছ।

— ডোন_মেগা