Ось що я придумав поки що після вивчення решти відповідей. Він
повинен мати можливість підтримувати тільки сенсорний, лише мишачий
або гібридний користувачів.
Створіть окремий клас наведення для ефекту наведення. За
замовчуванням додайте цей клас hover на нашу кнопку.
Ми не хочемо виявити наявність сенсорної підтримки та відключити
всі наведені ефекти з самого початку. Як згадували інші, гібридні
пристрої набувають популярності; люди можуть мати сенсорну
підтримку, але хочуть використовувати мишу і навпаки. Тому
видаляйте лише клацніть, коли користувач фактично торкається
кнопки.
Наступна проблема полягає в тому, що, якщо користувач хоче
повернутися до використання миші після натискання кнопки? Щоб
вирішити це, нам потрібно знайти відповідний момент для того, щоб
додати назад клас наведення, який ми видалили.
Однак, ми не можемо додати його негайно після видалення,
оскільки стан наведення залишається активним. Можливо, ми не хочемо
знищити і відтворити всю кнопку.
Отже, я думав про використання алгоритму зайнятого очікування
(використовуючи setInterval) для перевірки стану наведення. Після
того, як стан витягу деактивовано, ми можемо потім додати назад
клас наведення та зупинити очікуване заняття, повернувши нас назад
до початкового стану, де користувач може використовувати мишу або
торкнутися.
Я знаю, що зайнятий очікування не такий чудовий, але я не
впевнений, чи є відповідна подія. Я вважаю, що додати його знову в
подію миші, але це було не дуже надійним. Наприклад, коли спливаюче
сповіщення надходить після натискання кнопки, позиція миші
змінюється, але подія mouseleave не спрацьовує.
<div class="snippet" data-lang="js" data-hide="false"
data-console="true" data-babel="false"> <div
class="snippet-code">
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>
</div> </div>
Редагування: інший підхід, який я намагався, це викликати
e.preventDefault()
всередині onuchstart або onuchend.
Здається, що зупинка ефекту наведення, коли торкається кнопки, але
також припиняє натискання кнопки анімації та запобігає виклику
функції onclick при натисненні кнопки, тому вам слід викликати ці
дії вручну у обробнику на onuchstart або onuthend. Не дуже чисте
рішення.