これは、残りの答えを研究した後に私がこれまでに思いついたものです。タッチのみ、マウスのみ、またはハイブリッドユーザーをサポートできる必要があります。
ホバー効果用に別のホバークラスを作成します。デフォルトでは、このホバークラスをボタンに追加します。
タッチサポートの存在を検出し、すべてのホバー効果を最初から無効にしたくありません。他の人が述べたように、ハイブリッドデバイスが人気を集めています。人々はタッチサポートを持っているかもしれませんが、マウスを使用したいと思っています。したがって、ユーザーが実際にボタンに触れたときにのみホバークラスを削除します。
次の問題は、ユーザーがボタンに触れた後、マウスを使用することに戻りたい場合はどうなりますか？それを解決するには、削除したホバークラスを追加するための適切な瞬間を見つける必要があります。
ただし、ホバー状態がまだアクティブであるため、削除した直後に再度追加することはできません。ボタン全体を破棄して再作成したくない場合もあります。
そこで、ビジー待機アルゴリズム（setIntervalを使用）を使用してホバー状態を確認することを考えました。ホバー状態が非アクティブ化されたら、ホバークラスを追加してビジー待機を停止し、ユーザーがマウスまたはタッチを使用できる元の状態に戻すことができます。
忙しい待っていることはそれほど素晴らしいことではありませんが、適切なイベントがあるかどうかはわかりません。マウスリーブイベントで再度追加することを検討しましたが、それほど堅牢ではありませんでした。たとえば、ボタンがタッチされた後にアラートがポップアップすると、マウスの位置は移動しますが、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関数が呼び出されないため、ontouchstartまたはontouchendハンドラーで手動で呼び出す必要があります。あまりクリーンなソリューションではありません。