এই আমি বাকি উত্তরগুলি অধ্যয়ন করে এতদূর এনেছি। এটি কেবলমাত্র স্পর্শ, কেবল মাউস-বা সংকর ব্যবহারকারীদের সমর্থন করতে সক্ষম হওয়া উচিত।
হোভার ইফেক্টের জন্য একটি পৃথক হোভার ক্লাস তৈরি করুন। ডিফল্টরূপে, আমাদের বোতামে এই হোভার ক্লাস যুক্ত করুন।
আমরা স্পর্শ সমর্থনের উপস্থিতি সনাক্ত করতে এবং প্রথম থেকেই সমস্ত হোভার ইফেক্টগুলি অক্ষম করতে চাই না। অন্যদের দ্বারা যেমন উল্লেখ করা হয়েছে, হাইব্রিড ডিভাইসগুলি জনপ্রিয়তা পাচ্ছে; লোকেরা স্পর্শ সমর্থন থাকতে পারে তবে একটি মাউস এবং তদ্বিপরীত ব্যবহার করতে চায়। সুতরাং, যখন ব্যবহারকারী আসলে বোতামটি স্পর্শ করে কেবল তখনই হোভার ক্লাসটি সরিয়ে ফেলুন।
পরবর্তী সমস্যাটি হল, যদি ব্যবহারকারীটি বোতামটি স্পর্শ করার পরে মাউস ব্যবহার করতে ফিরে যেতে চান? এটি সমাধানের জন্য, আমাদের সরিয়ে নেওয়া হোভার ক্লাসটি আবার যুক্ত করার জন্য আমাদের একটি উপযুক্ত মুহূর্তের সন্ধান করতে হবে।
তবে আমরা এটিকে সরিয়ে দেওয়ার সাথে সাথেই এটি আবার যুক্ত করতে পারি না, কারণ হোভারের অবস্থা এখনও সক্রিয়। আমরা পুরো বোতামটি পাশাপাশি ধ্বংস করতে ও পুনরায় তৈরি করতে চাই না।
সুতরাং, আমি হোভারের অবস্থাটি পরীক্ষা করতে ব্যস্ত-অপেক্ষার অ্যালগরিদম (সেটইন্টারভাল ব্যবহার করে) ব্যবহার করার কথা ভেবেছিলাম। একবার হোভার অবস্থা নিষ্ক্রিয় হয়ে গেলে, তারপরে আমরা হোভার ক্লাসটি আবার যুক্ত করতে এবং ব্যস্ত-অপেক্ষাকে থামাতে পারি, আমাদের মূল অবস্থায় ফিরিয়ে আনতে যেখানে ব্যবহারকারী মাউস বা স্পর্শ ব্যবহার করতে পারে।
আমি জানি ব্যস্ত-অপেক্ষার কাজটি দুর্দান্ত নয় তবে কোনও উপযুক্ত ঘটনা আছে কিনা তা আমি নিশ্চিত নই। আমি এটিকে আবার মাউসলেভ ইভেন্টে যুক্ত করার বিষয়টি বিবেচনা করেছি, তবে এটি খুব শক্ত ছিল না। উদাহরণস্বরূপ, বোতামটি স্পর্শের পরে যখন কোনও সতর্কতা পপ আপ হয়, তখন মাউস অবস্থানটি স্থানান্তরিত হয় তবে মাউসলেভ ইভেন্টটি ট্রিগার হয় না।
var button = document.getElementById('myButton');
button.ontouchstart = function(e) {
console.log('ontouchstart');
$('.button').removeClass('button-hover');
startIntervalToResetHover();
};
button.onclick = function(e) {
console.log('onclick');
}
var intervalId;
function startIntervalToResetHover() {
// Clear the previous one, if any.
if (intervalId) {
clearInterval(intervalId);
}
intervalId = setInterval(function() {
// Stop if the hover class already exists.
if ($('.button').hasClass('button-hover')) {
clearInterval(intervalId);
intervalId = null;
return;
}
// Checking of hover state from
// http://stackoverflow.com/a/8981521/2669960.
var isHovered = !!$('.button').filter(function() {
return $(this).is(":hover");
}).length;
if (isHovered) {
console.log('Hover state is active');
} else {
console.log('Hover state is inactive');
$('.button').addClass('button-hover');
console.log('Added back the button-hover class');
clearInterval(intervalId);
intervalId = null;
}
}, 1000);
}
.button {
color: green;
border: none;
}
.button-hover:hover {
background: yellow;
border: none;
}
.button:active {
border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='myButton' class='button button-hover'>Hello</button>
সম্পাদনা: অন্য একটি পদ্ধতির জন্য আমি চেষ্টা করেছিলাম e.preventDefault()হ'ল অনটচ স্টার্ট বা অন্টচেন্ডের মধ্যে কল করা। এটি বোতামটি স্পর্শ করা হলে হোভার এফেক্টটি থামিয়ে দেবে বলে মনে হয়, তবে এটি বোতামটি ক্লিক অ্যানিমেশনটি বন্ধ করে দেয় এবং বোতামটি স্পর্শ করা হলে অনক্লিক ফাংশনটি কল করা থেকে বাধা দেয়, সুতরাং আপনাকে সেইগুলি ম্যানুয়ালি কল করতে হবে অনটচ স্টার্ট বা অন্টচেন্ড হ্যান্ডলারে। খুব পরিষ্কার সমাধান নয়।