นี่คือสิ่งที่ฉันเกิดขึ้นหลังจากศึกษาคำตอบที่เหลือ มันควรจะสามารถรองรับผู้ใช้แบบสัมผัสเท่านั้นเมาส์เท่านั้นหรือไฮบริด
สร้างคลาส hover แยกต่างหากสำหรับเอฟเฟกต์โฮเวอร์ โดยค่าเริ่มต้นเพิ่มคลาส hover นี้ลงในปุ่มของเรา
เราไม่ต้องการตรวจจับการมีอยู่ของการรองรับการสัมผัสและปิดใช้งานเอฟเฟ็กต์โฮเวอร์ทั้งหมดตั้งแต่เริ่มต้น ดังที่ผู้อื่นกล่าวถึงอุปกรณ์ไฮบริดกำลังได้รับความนิยม ผู้คนอาจมีระบบสัมผัส แต่ต้องการใช้เมาส์และในทางกลับกัน ดังนั้นให้ลบคลาส hover เมื่อผู้ใช้กดปุ่มจริง
ปัญหาต่อไปคือถ้าผู้ใช้ต้องการกลับไปใช้เมาส์หลังจากกดปุ่ม? เพื่อแก้ปัญหานั้นเราต้องหาช่วงเวลาที่เหมาะสมเพื่อเพิ่มคลาสโฮเวอร์ที่เราลบออกไป
อย่างไรก็ตามเราไม่สามารถเพิ่มกลับคืนได้ทันทีหลังจากลบเนื่องจากสถานะโฮเวอร์ยังทำงานอยู่ เราอาจไม่ต้องการทำลายและสร้างปุ่มทั้งหมดอีกครั้งเช่นกัน
ดังนั้นฉันคิดว่าจะใช้อัลกอริทึมที่รอไม่ว่าง (โดยใช้ setInterval) เพื่อตรวจสอบสถานะโฮเวอร์ เมื่อสถานะโฮเวอร์ถูกปิดการใช้งานเราสามารถเพิ่มคลาสโฮเวอร์กลับและหยุดการรอคอยยุ่งทำให้เรากลับสู่สถานะเดิมที่ผู้ใช้สามารถใช้เมาส์หรือสัมผัสได้
ฉันรู้ว่าการรอคอยไม่ว่างนั้นยอดเยี่ยม แต่ฉันไม่แน่ใจว่ามีเหตุการณ์ที่เหมาะสมหรือไม่ ฉันคิดว่าจะเพิ่มมันกลับเข้าไปในเหตุการณ์ mouseleave แต่มันไม่แข็งแกร่งมาก ตัวอย่างเช่นเมื่อการแจ้งเตือนปรากฏขึ้นหลังจากกดปุ่มตำแหน่งของเมาส์จะเลื่อน แต่เหตุการณ์ mouseleave จะไม่ถูกเรียก
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()ภายใน ontouchstart หรือ ontouchend ดูเหมือนว่าจะหยุดเอฟเฟ็กต์โฮเวอร์เมื่อปุ่มถูกแตะ แต่มันก็หยุดการเคลื่อนไหวของปุ่มคลิกและป้องกันไม่ให้มีการเรียกใช้ฟังก์ชั่น onclick เมื่อปุ่มถูกแตะดังนั้นคุณต้องเรียกใช้งานเหล่านั้นด้วยตนเองใน ไม่ใช่วิธีที่สะอาดมาก