बाकी के जवाबों का अध्ययन करने के बाद अब तक मैं यही करता आया हूं। यह टच-ओनली, माउस-ओनली या हाइब्रिड यूजर्स को सपोर्ट करने में सक्षम होना चाहिए।
होवर प्रभाव के लिए एक अलग होवर वर्ग बनाएं। डिफ़ॉल्ट रूप से, इस होवर वर्ग को हमारे बटन में जोड़ें।
हम स्पर्श समर्थन की उपस्थिति का पता नहीं लगाना चाहते हैं और शुरुआत से ही सभी होवर प्रभावों को अक्षम कर रहे हैं। जैसा कि दूसरों ने उल्लेख किया है, संकर उपकरण लोकप्रियता प्राप्त कर रहे हैं; लोगों के पास स्पर्श समर्थन हो सकता है लेकिन वे माउस का उपयोग करना चाहते हैं और इसके विपरीत। इसलिए, केवल होवर वर्ग को हटा दें जब उपयोगकर्ता वास्तव में बटन को छूता है।
अगली समस्या यह है कि यदि उपयोगकर्ता बटन को छूने के बाद माउस का उपयोग करना चाहता है, तो क्या होगा? इसे हल करने के लिए, हमें हॉवर वर्ग को वापस जोड़ने के लिए एक उपयुक्त क्षण खोजने की आवश्यकता है जिसे हमने हटा दिया है।
हालाँकि, हम इसे हटाने के तुरंत बाद वापस नहीं जोड़ सकते, क्योंकि होवर स्थिति अभी भी सक्रिय है। हम पूरे बटन को भी नष्ट करना और बहलाना नहीं चाह सकते।
इसलिए, मैंने हॉवर स्थिति की जांच करने के लिए एक व्यस्त-प्रतीक्षा एल्गोरिथ्म (सेटइंटरवल का उपयोग करके) का उपयोग करने के बारे में सोचा। एक बार होवर स्थिति को निष्क्रिय कर देने के बाद, हम फिर से होवर क्लास को वापस जोड़ सकते हैं और व्यस्त-प्रतीक्षा को रोक सकते हैं, हमें मूल स्थिति में वापस ला सकते हैं जहां उपयोगकर्ता माउस या स्पर्श का उपयोग कर सकता है।
मुझे पता है कि व्यस्त-प्रतीक्षा इतनी बड़ी नहीं है लेकिन मुझे यकीन नहीं है कि कोई उपयुक्त घटना है। मैंने इसे मूसलीव इवेंट में वापस जोड़ने पर विचार किया है, लेकिन यह बहुत मजबूत नहीं था। उदाहरण के लिए, जब बटन छुआ जाने के बाद कोई अलर्ट आता है, तो माउस स्थिति बदल जाती है, लेकिन मूसलीव इवेंट चालू नहीं होता है।
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()ऑनटचस्टार्ट या ऑनटचेंड के भीतर कॉल करना। यह बटन को छूने पर होवर प्रभाव को रोकने के लिए प्रकट होता है, लेकिन यह बटन क्लिक एनीमेशन को भी रोकता है और ऑनक्लिक फ़ंक्शन को बटन को छूने से रोकता है, इसलिए आपको उन लोगों को मैन्युअल रूप से ऑनटचस्टार्ट या ऑनकचेंड हैंडलर में कॉल करना होगा। बहुत साफ समाधान नहीं है।