আরও উন্নত সমাধান
প্রথমে আমি ধনী ব্র্যাডশ'র পদ্ধতির সাথে গিয়েছিলাম , তবে তারপরে সমস্যাগুলি দেখা দিতে শুরু করে। এমনটি করে e.preventDefault () উপর 'touchstart' ঘটনা, পৃষ্ঠা আর স্ক্রোল এবং, তন্ন তন্ন দীর্ঘ প্রেস নির্বাহ শেষ করতে সক্ষম হয় বিকল্প মেনু কিংবা দুবার ক্লিক জুম ফায়ার করতে সক্ষম হয়।
কোনও ইভেন্টটি কোন ইভেন্টটি ডাকা হচ্ছে তা সন্ধান করা হতে পারে এবং কেবলমাত্র 'স্পর্শ' এর পরে কেবল e.preventDefault () । যেহেতু স্ক্রোলের 'টাচমোভ ' আসে 'স্পর্শ' এর আগে এটি ডিফল্ট হিসাবে থাকে এবং 'ক্লিক' এও প্রতিরোধ করা হয় কারণ এটি মোবাইলে প্রয়োগ করা ইভেন্ট চেইনে উত্তরওয়ার্ড আসে যেমন :
// Binding to the '.static_parent' ensuring dynamic ajaxified content
$('.static_parent').on('touchstart touchend', '.link', function (e) {
// If event is 'touchend' then...
if (e.type == 'touchend') {
// Ensuring we event prevent default in all major browsers
e.preventDefault ? e.preventDefault() : e.returnValue = false;
}
// Add class responsible for :hover effect
$(this).toggleClass('hover_effect');
});
তবে তারপরে, বিকল্পগুলির মেনুটি উপস্থিত হওয়ার পরে, এটি ক্লাসটি টগল করার জন্য দায়ী 'স্পর্শ'টিকে আর ছুঁড়ে দেয় না এবং পরের বার হোভার আচরণটি অন্যভাবে হয়ে যাবে, পুরোপুরি মিশ্রিত।
তারপরে একটি সমাধান হ'ল , আবার শর্তসাপেক্ষে আমরা কোন ইভেন্টে আছি বা সবেমাত্র আলাদা আলাদা ঘটনা ঘটছি এবং এটি 'টাচস্টার্ট' এবং 'টাচেনড' এ যথাক্রমে অ্যাডক্লাস () এবং সরানক্লাস () ব্যবহার করুন , এটি সর্বদা শুরু হয়ে শেষ হয়ে যায় তা নিশ্চিত করে ends যথাযথভাবে সিদ্ধান্ত নেওয়ার পরিবর্তে যথাক্রমে যুক্ত এবং সরানো। সমাপ্তির জন্য আমরা 'ফোকাসআউট' ইভেন্টের ধরণের রিলিং কলব্যাককেও আবদ্ধ করব , যে কোনও লিঙ্কের হোভার ক্লাস যে ক্লান্তিতে থাকতে পারে এবং কখনও কখনও পুনর্বিবেচিত হতে পারে তা সাফ করার জন্য দায়বদ্ধ থাকব:
$('.static_parent').on('touchstart', '.link', function (e) {
$(this).addClass('hover_effect');
});
$('.static_parent').on('touchend focusout', '.link', function (e) {
// Think double click zoom still fails here
e.preventDefault ? e.preventDefault() : e.returnValue = false;
$(this).removeClass('hover_effect');
});
সতর্কতা: কিছু কিছু বাগ এখনও পূর্ববর্তী দুটি সমাধানে ঘটে এবং এটিও মনে হয় (পরীক্ষা করা হয়নি), ডাবল ক্লিক জুম এখনও ব্যর্থ হয়।
পরিপাটি এবং আশা করি বাগ ফ্রি (না :)) জাভাস্ক্রিপ্ট সমাধান
এখন , একটি সেকেন্ডের জন্য, ক্লিনার, পরিপাটি এবং প্রতিক্রিয়াশীল, কেবল জাভাস্ক্রিপ্ট ব্যবহার করে (হোভার ক্লাস এবং সিউডো: হোভারের মধ্যে কোনও মিশ্রণ নেই) ব্যবহার করুন এবং যেখান থেকে আপনি সর্বজনীন (মোবাইল এবং ডেস্কটপ) এ 'ক্লিক' ইভেন্টে সরাসরি আপনার অজ্যাক্স আচরণটি কল করতে পারেন , আমি একটি সুন্দর উত্তর উত্তর পেয়েছি যা থেকে অবশেষে আমি বুঝতে পারি যে কীভাবে আমি বিভিন্ন ইভেন্ট কলব্যাকগুলি অনিবার্যভাবে ইভেন্টের শৃঙ্খলে একে অপরের পরিবর্তন না করে স্পর্শ এবং মাউস ইভেন্টগুলিকে একসাথে মিশতে পারি। এখানে কীভাবে:
$('.static_parent').on('touchstart mouseenter', '.link', function (e) {
$(this).addClass('hover_effect');
});
$('.static_parent').on('mouseleave touchmove click', '.link', function (e) {
$(this).removeClass('hover_effect');
// As it's the chain's last event we only prevent it from making HTTP request
if (e.type == 'click') {
e.preventDefault ? e.preventDefault() : e.returnValue = false;
// Ajax behavior here!
}
});