デスクトップとタブレットの両方から使用することを意図したWebサイトを書いています。デスクトップからアクセスしているときに、画面のクリック可能な領域を:hover効果（異なる背景色など）で明るくしたいのですが、タブレットではマウスがないため、ホバー効果は必要ありません。

問題は、タブレット上で何かをタップすると、ブラウザには明らかに「見えないマウスカーソル」があり、タップした場所に移動してそこにそのまま残します。つまり、タップしたものがライトで点灯します何かをタップするまでホバー効果。

マウスを使用しているときにホバー効果を取得し、タッチスクリーンを使用しているときにホバー効果を抑制するにはどうすればよいですか？

誰かがそれを提案することを考えていた場合、私はユーザーエージェントのスニッフィングを使いたくありません。同じデバイスにタッチスクリーンとマウスの両方を搭載することもできます（今日はそれほど一般的ではないかもしれませんが、将来的にはさらに普及するでしょう）。このデバイスには興味がありません。現在どのように使用されているか（マウスやタッチスクリーン）に興味があります。

私はすでにフックしようとしたtouchstart、touchmoveとtouchendのイベントをして呼び出すpreventDefault()抑制する「目に見えないマウスカーソル」時間の一部をしており、それらのすべてに。しかし、2つの異なる要素間をすばやく前後にタップすると、数回タップすると、「マウスカーソル」が移動し、ホバー効果が点灯しますpreventDefault。これは、常に光栄に思うわけではないようです。必要がない限り、詳細について退屈することはありません-それが適切なアプローチであるかどうかさえわかりません。誰かがより簡単な修正を持っている場合、私はすべて耳です。

編集：これは沼地標準のCSS :hoverで再現できますが、参考のために簡単に再現します。

<style>
  .box { border: 1px solid black; width: 150px; height: 150px; }
  .box:hover { background: blue; }
</style>
<div class="box"></div>
<div class="box"></div>

いずれかのボックスの上にマウスを置くと、青色の背景が表示されます。しかし、いずれかのボックスをタップすると、背景も青色になります。これは私が防止しようとしていることです。

上記を実行し、jQueryのマウスイベントをフックするサンプルもここに投稿しました。あなたはタップイベントも発火することを確認するためにそれを使用することができmouseenter、mousemoveそしてmouseleave。

ホバー効果によってページのコンテンツが変化するという質問からです。その場合、私のアドバイスは：

• 上の効果をホバー追加touchstartしてmouseenter。
• 影響をホバー削除mouseleave、touchmoveおよびclick。

または、コンテンツの変更がないページを編集できます。

バックグラウンド

マウスをシミュレートするために、ユーザーがタッチスクリーン（iPadなど）で指をタッチして離した場合、Webkitモバイルなどのブラウザーは次のイベントを発生させます（ソース：html5rocks.comのTouch And Mouse）：

1. touchstart
2. touchmove
3. touchend
4. 300ミリ秒の遅延。ブラウザがこれをダブルタップではなくシングルタップであることを確認します。
5. mouseover
6. mouseenter
   • 注：場合mouseover、mouseenterまたはmousemoveイベントをページのコンテンツを変更し、次のイベントが解雇されることはありません。
7. mousemove
8. mousedown
9. mouseup
10. click

Webブラウザにマウスイベントをスキップするように指示するだけでは不可能のようです。

さらに悪いことに、マウスオーバーイベントがページコンテンツを変更した場合、Safari Webコンテンツガイド-イベントの処理で説明されているように、クリックイベントは発生しません。、特にOne-Fingerイベントの図6.4でます。正確に「コンテンツの変更」とは、ブラウザとバージョンによって異なります。iOS 7.0では、背景色の変更はコンテンツの変更ではない（またはなくなった）ことがわかりました。

ソリューションの説明

要点をまとめると：

• ホバー効果を追加する touchstartしてmouseenter。
• 影響をホバー削除mouseleave、touchmoveおよびclick。

何もしないことに注意してください touchend。

これは明らかにマウスイベントで機能します：mouseenterおよびmouseleave（わずかに改善されたバージョンmouseoverとはmouseout）解雇され、ホバーを追加および削除します。

ユーザーが実際に clickリンクすると、ホバー効果も削除されます。これにより、ユーザーがWebブラウザーの戻るボタンを押した場合に確実に削除されます。

これはタッチイベントでも機能します。タッチスタートでホバー効果が追加されます。タッチエンドで「削除されません」。に再度追加されますmouseenter。これにより、コンテンツは変更されません（すでに追加されています）。clickイベントも発生し、ユーザーが再度クリックする必要なくリンクがたどられます。

ブラウザーがtouchstartイベントとの間に持つ300ミリ秒の遅延clickホバー効果がこの短い時間中に表示されるため、実際に使用されます。

ユーザーがクリックをキャンセルすることを決定した場合、指の動きは通常どおりに行われます。mouseleaveイベントは発生せず、ホバー効果がそのまま残るため、通常これは問題です。ありがたいことに、これはホバー効果を削除することで簡単に修正できますtouchmove。

それでおしまい！

FastClickライブラリを使用するなどして、300ミリ秒の遅延を取り除くことが可能であることに注意してください。が、これはこの質問の範囲外です。

代替ソリューション

私は次の代替案で次の問題を見つけました：

• ブラウザの検出：非常にエラーが発生しやすい。デバイスにはマウスまたはタッチのいずれかが搭載されていると想定していますが、タッチディスプレイが普及すると、両方の組み合わせがますます一般的になります。
• CSSメディア検出：私が認識している唯一のCSSのみのソリューション。それでもエラーが発生しやすく、デバイスがマウスまたはタッチのいずれかであると見なされますが、両方が可能です。
• でクリックイベントをエミュレートするtouchend：これは、ユーザーが実際にリンクをクリックするつもりがなく、スクロールまたはズームのみを望んでいたとしても、リンクを誤ってたどります。
• 変数を使用してマウスイベントを抑制する：これtouchendは、後続のマウスイベントでif条件として使用される変数を設定し、その時点での状態変化を防ぎます。変数はクリックイベントでリセットされます。このページのWalter Romanの回答を参照してください。タッチインターフェイスでホバー効果を本当に必要としない場合、これは適切なソリューションです。残念ながら、これはtouchend、別の理由でが発生し、クリックイベントが発生せず（ユーザーがスクロールまたはズームした場合など）、マウスでリンクをたどろうとすると（つまり、マウスとタッチインターフェイスの両方を備えたデバイスで）機能しません。）。

参考文献

• http://jsfiddle.net/macfreek/24Z5M/。このサンドボックスで上記のソリューションを自分でテストします。
• http://www.macfreek.nl/memory/Touch_and_mouse_with_hover_effects_in_a_web_browser。これと同じ答え、もう少し背景があります。
• https://www.html5rocks.com/en/mobile/touchandmouse/。一般的なタッチとマウスに関するhtml5rocks.comの素晴らしい背景記事。
• https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html。Safari Webコンテンツガイド-イベントの処理。特に、図6.4を参照してください。この図は、mouseoverまたはmousemoveイベント中にコンテンツが変更された後、それ以上イベントが発生しないことを説明しています。

マウスを使用しているときにホバー効果を取得し、タッチスクリーンを使用しているときにホバー効果を抑制するにはどうすればよいですか？

タッチスクリーンのホバー効果を抑制するのではなく、マウスイベントのホバー効果を追加することとは考えないでしょうか。

:hoverCSSで効果を維持したい場合は、メディアごとに異なるスタイルを指定できます。

@media screen { /* hover styles here */ } 

@media handheld { /* non-hover styles here */ }

残念ながら、これを無視して画面のルールのみを使用するモバイルデバイスはたくさんあります。幸い、多くの新しいモバイル/タブレットブラウザーは、いくつかのより洗練されたメディアクエリをサポートしています。

@media screen and (max-width:800px) { /* non-hover styles here */ }

そのため、「画面」または「ハンドヘルド」の部分が無視されても、「最大幅」でうまくいきます。800ピクセル未満の画面を持つものはすべてタブレットまたは携帯電話であり、ホバー効果を使用してはならないと想定するだけです。低解像度のデバイスでマウスを使用しているまれなユーザーには、ホバー効果は表示されませんが、それ以外のサイトは問題ありません。

メディアクエリについてさらに読むには？このオンラインに関する記事はたくさんあります-ここに1つあります：http : //www.alistapart.com/articles/return-of-the-mobile-stylesheet

ホバー効果をCSSからシフトしてJavaScriptで適用する場合、マウスイベントに具体的にバインドできます。また、画面サイズに基づいていくつかの仮定を行うだけで、最悪の場合の「問題」はマウスを使用しているユーザーは、ホバー効果を見逃します。

最近のプロジェクト用に次のJSを書きました。これは、タッチすると表示されるべきではないホバー効果を持つデスクトップ/モバイル/タブレットサイトでした。

mobileNoHoverState以下のモジュールには変数がありますpreventMouseover（最初はとして宣言されていますfalse）。これはtrue、ユーザーがtouchstart要素でイベントを発生させたときに設定されます$target。

preventMouseoverその後false、mouseoverイベントが発生するたびにが設定されます。これにより、ユーザーがタッチスクリーンとマウスの両方を使用している場合でも、サイトは意図したとおりに機能します。

私たちは、知っているmouseover後にトリガされているtouchstartので、彼らが内で宣言されていることをオーダーinit。

var mobileNoHoverState = function() {

    var hoverClass = 'hover',
        $target = $(".foo"), 
        preventMouseover = false;

    function forTouchstart() {
        preventMouseover = true;
    }

    function forMouseover() {
        if (preventMouseover === false) {
            $(this).addClass(hoverClass);
        } else {
            preventMouseover = false;
        }
    }

    function forMouseout() {
        $(this).removeClass(hoverClass);
    }

    function init() {
        $target.on({
            touchstart  : forTouchstart,
            mouseover   : forMouseover,
            mouseout    : forMouseout
        });                
    }

    return {
        init: init
    };
}();

その後、モジュールはさらに下でインスタンス化されます。

mobileNoHoverState.init();

css自分のすべてのビューに重いJavaScriptソリューションを散りばめるのは不愉快なオプションのように思えたので、私は本当に自分でこれに対する純粋なソリューションを求めていました。最終的に、@ media.hoverクエリが見つかりました。これは、「主要な入力メカニズムによってユーザーが要素の上にホバーできるかどうか」を検出できます。これにより、「ホバリング」が入力デバイスの直接機能よりもエミュレートされたアクションであるタッチデバイスが回避されます。

たとえば、リンクがある場合：

<a href="/" class="link">Home</a>

次に:hover、デバイスがこれで簡単にサポートできる場合にのみ、安全にスタイルを設定できますcss。

@media (hover: hover) {
  .link:hover { /* hover styles */ }
}

最新のブラウザのほとんどはインタラクションメディア機能のクエリをサポートしていますが、IEやFirefoxなどの一部の一般的なブラウザはサポートしていません。私の場合、デスクトップのChromeとモバイルのChromeとSafariのみをサポートするつもりだったので、これは正常に機能します。

私の解決策は、hover-active cssクラスをHTMLタグに追加し、それを：hoverを使用してすべてのCSSセレクターの先頭で使用し、最初のtouchstartイベントでそのクラスを削除することです。

http://codepen.io/Bnaya/pen/EoJlb

JS：

(function () {
    'use strict';

    if (!('addEventListener' in window)) {
        return;
    }

    var htmlElement = document.querySelector('html');

    function touchStart () {
        document.querySelector('html').classList.remove('hover-active');

        htmlElement.removeEventListener('touchstart', touchStart);
    }

    htmlElement.addEventListener('touchstart', touchStart);
}());

HTML：

<html class="hover-active">

CSS：

.hover-active .mybutton:hover {
    box-shadow: 1px 1px 1px #000;
}

同じ問題を解決するために私が行ったのは、機能の検出（このコードのようなものを使用）を行い、onTouchMoveが定義されているかどうかを確認し、定義されている場合はcssクラス「touchMode」を本体に追加し、それ以外の場合は「 desktopMode」。

次に、一部のスタイル効果がタッチデバイスにのみ適用されるか、デスクトップにのみ適用されるたびに、CSSルールの前に適切なクラスが追加されます。

.desktopMode .someClass:hover{ color: red }
.touchMode .mainDiv { width: 100%; margin: 0; /*etc.*/ }

編集：もちろん、この戦略はCSSにいくつかの余分な文字を追加するので、CSSサイズが心配な場合は、touchModeとdesktopModeの定義を検索し、それらを異なるファイルに入れて、デバイスごとに最適化されたCSSを提供できますタイプ; または、本番に進む前にクラス名をもっと短いものに変更することもできます。

右、私はjstに同様の問題がありましたが、メディアクエリと単純なCSSでなんとか修正しました。私はここでいくつかのルールを破っていると確信していますが、それは私のために働いています。

私は基本的に誰かが作った大規模なアプリケーションを取り、それを反応させる必要がありました。彼らはjQueryUIを使用し、jQueryを改ざんしないように私に頼んだので、CSSだけを使用することに制限されました。

タッチスクリーンモードでボタンの1つを押すと、ボタンのアクションが有効になる前に、ホバー効果が1秒間鳴ります。修正方法は次のとおりです。

@media only screen and (max-width:1024px) {

       #buttonOne{
            height: 44px;
        }


        #buttonOne:hover{
            display:none;
        }
}   

私のプロジェクトでは、https：//www.npmjs.com/package/postcss-hover-prefixおよびhttps://modernizr.com/を使用してこの問題を解決しました。 まず、出力cssファイルをで後処理しますpostcss-hover-prefix。.no-touchすべてのcss hoverルールに追加されます。

const fs = require("fs");
const postcss = require("postcss");
const hoverPrfx = require("postcss-hover-prefix");

var css = fs.readFileSync(cssFileName, "utf8").toString();
postcss()
   .use(hoverPrfx("no-touch"))
   .process(css)
   .then((result) => {
      fs.writeFileSync(cssFileName, result);
   });

CSS

a.text-primary:hover {
  color: #62686d;
}

なる

.no-touch a.text-primary:hover {
  color: #62686d;
}

実行時に、このようModernizrにhtmlタグにcssクラスを自動的に追加します

<html class="wpfe-full-height js flexbox flexboxlegacy canvas canvastext webgl 
  no-touch 
  geolocation postmessage websqldatabase indexeddb hashchange
  history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage
  borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients
  cssreflections csstransforms csstransforms3d csstransitions fontface
  generatedcontent video audio localstorage sessionstorage webworkers
  applicationcache svg inlinesvg smil svgclippaths websocketsbinary">

このようなcssとModernizrの後処理により、タッチデバイスのホバーが無効になり、他のデバイスが有効になります。実際、このアプローチはBootstrap 4に触発され、どのようにして同じ問題を解決したのか：https : //v4-alpha.getbootstrap.com/getting-started/browsers-devices/#sticky-hoverfocus-on-mobile

mouseLeaveタッチスクリーン上の要素に触れるたびにイベントをトリガーできます。すべての<a>タグの解決策は次のとおりです。

function removeHover() {
    var anchors = document.getElementsByTagName('a');
    for(i=0; i<anchors.length; i++) {
        anchors[i].addEventListener('touchstart', function(e){
            $('a').mouseleave();
        }, false);
    }
}

この問題に対する2つの解決策が見つかりました。これは、modernizrなどのタッチを検出し、html要素にタッチクラスを設定することを意味します。

これは良いですが、あまりサポートされていません：

html.touch *:hover {
    all:unset!important;
}

しかし、これは非常に良いサポートがあります：

html.touch *:hover {
    pointer-events: none !important;
}

私にとっては完璧に動作します。すべてのホバー効果は、ボタンをタッチしたときに点灯しますが、マウスイベントの最初のホバー効果のようにバギーにはなりません。

ノータッチデバイスからタッチを検出すると、modernizrが最高の仕事をしたと思います。

https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touchevents.js

編集

私はこの問題のより簡単な解決策を見つけました

クライアントがタッチデバイスかどうかを確認する方法

奇妙な問題のように聞こえるので、CSSを確認すると役立つ場合があります。しかし、とにかく、それが起こっていて他のすべてが良い場合は、ホバー効果をjavascriptにシフトしてみてください（jqueryも使用できます）。単に、マウスオーバーイベントまたはより適切なmouseenterイベントにバインドし、イベントが発生したときに要素を点灯させます。

ここで最後の例を確認してください：http : //api.jquery.com/mouseover/、イベントが発生したときにログに記録するようなものを使用して、そこから取得できます！

JavaScriptを使用してよければ、ページでModernizrを使用できます。ページが読み込まれると、非タッチスクリーンブラウザーのクラス '.no-touch'がhtmlタグに追加されますが、タッチスクリーンブラウザーの場合、htmlタグのクラス '.touch'がhtmlタグに追加されます。 。

次に、mouseenterリスナーとmouseleaveリスナーの追加を決定する前に、htmlタグにノータッチクラスが含まれているかどうかを確認するだけです。

if($('html').hasClass('no-touch')){
    $('.box').on("mouseenter", function(event){
            $(this).css('background-color','#0000ff')
    });
    $('.box').on("mouseleave", function(event){
            $(this).css('background-color','')
    });
}

タッチスクリーンデバイスの場合、イベントにはリスナーがないため、タップしてもホバー効果はありません。

最近行ったプロジェクトで、jQueryの委任イベント機能を使用してこの問題を解決しました。jQueryセレクターを使用して特定の要素を探し、マウスが要素の上にあるときにCSSクラスをそれらの要素に追加/削除します。Windows 8を実行しているタッチ対応ノートブックのIE10を含む、私がテストできた限り、問題なく動作するようです。

$(document).ready(
    function()
    {
        // insert your own selector here: maybe '.hoverable'?
        var selector = 'button, .hotspot';

        $('body')
            .on('mouseover', selector, function(){ $(this).addClass('mouseover');    })
            .on('mouseout',  selector, function(){ $(this).removeClass('mouseover'); })
            .on('click',     selector, function(){ $(this).removeClass('mouseover'); });
    }
);

編集：このソリューションでは、もちろん、CSSを変更して "：hover"セレクターを削除し、 "ホバリング可能"にする要素を事前に検討する必要があります。

ページに非常に多くの要素（数千など）がある場合、このソリューションはページ内のすべての要素で3つのタイプのイベントをキャッチし、セレクターが一致した場合に処理を行うため、少し遅くなる可能性があります。「.hover」を書き込んだCSSリーダーに「：hover」を読み取らせたくなかったため、CSSクラスに「hover」ではなく「mouseover」という名前を付けました。

これが私の解決策です：http：//jsfiddle.net/agamemnus/g56aw709/--以下のコード。

必要なのは、「：hover」を「.hover」に変換することだけです...それだけです！これと他の大きな違いは、これはなどの非特異要素セレクターでも機能すること.my_class > *:hover {です。

handle_css_hover_effects ()

function handle_css_hover_effects (init) {
 var init = init || {}
 var handle_touch_events = init.handle_touch_events || true
 var handle_mouse_events = init.handle_mouse_events || true
 var hover_class         = init.hover_class         || "hover"
 var delay_preferences   = init.delay_preferences   || {touch: {add: 500, remove: 500}}
 function default_handler (curobj, input_type, op) {
  var hovered_element_selector = "*" + ((op == "add") ? ":" : ("." + hover_class))
  var hovered_elements = Array.prototype.slice.call(document.body.querySelectorAll(hovered_element_selector))
  var modified_list = []
  while (true) {
   if ((curobj == null) || (curobj == document.documentElement)) break
   if (hovered_elements.indexOf(curobj) != -1) modified_list.push (curobj)
   curobj = curobj.parentNode
  }
  function do_hover_change () {modified_list.forEach (function (curobj) {curobj.classList[op](hover_class)})}
  if ((!delay_preferences[input_type]) || (!delay_preferences[input_type][op])) {
   do_hover_change ()
  } else {
   setTimeout (do_hover_change, delay_preferences[input_type][op])
  }
 }

 if (handle_mouse_events) {
  document.body.addEventListener ('mouseover' , function (evt) {var curobj = evt.target; default_handler (curobj, "mouse", "add")})
  document.body.addEventListener ('mouseout'  , function (evt) {var curobj = evt.target; default_handler (curobj, "mouse", "remove")})
  document.body.addEventListener ('click'     , function (evt) {var curobj = evt.target; default_handler (curobj, "mouse", "remove")})
 }

 if (handle_touch_events) {
  document.body.addEventListener ('touchstart', function (evt) {var curobj = evt.target; default_handler (curobj, "touch", "add")})
  document.body.addEventListener ('touchend'  , function (evt) {var curobj = evt.target; default_handler (curobj, "touch", "remove")})
  document.body.addEventListener ('touchmove',  function (evt) {
   var curobj = evt.target
   var hovered_elements = Array.prototype.slice.call(document.body.querySelectorAll("*:hover"))
   var lastobj = null
   evt = evt.changedTouches[0]
   var elements_at_point = get_elements_at_point (evt.pageX, evt.pageY)
   // Get the last element that isn't at the current point but is still hovered over, and remove only its hover attribute.
   while (true) {
    if ((curobj == null) || (curobj == document.documentElement)) break
    if ((hovered_elements.indexOf(curobj) != -1) && (elements_at_point.indexOf(curobj) == -1)) lastobj = curobj
    curobj = curobj.parentNode
   }
   if (lastobj == null) return
   if ((!delay_preferences.touch) || (!delay_preferences.touch.remove)) {
    lastobj.classList.remove(hover_class)
   } else {
    setTimeout (function () {lastobj.classList.remove(hover_class)}, delay_preferences.touch.remove)
   }

   function get_elements_at_point (x, y) {
    var el_list = [], pe_list = []
    while (true) {
     var curobj = document.elementFromPoint(x, y)
     if ((curobj == null) || (curobj == document.documentElement)) break
     el_list.push (curobj); pe_list.push (curobj.style.pointerEvents)
     curobj.style.pointerEvents = "none"
    }
    el_list.forEach (function (current_element, i) {current_element.style.pointerEvents = pe_list[i]})
    return el_list
   }
  })
 }
}

ページにModernizrを含め、代わりにホバー状態を次のように設定します。

html.no-touchevents .box:hover {
    background: blue;
}

将来のこんにちは人、pointerそして/またはhoverメディアクエリを使用したいでしょう。handheldメディアクエリは廃止されました。

/* device is using a mouse or similar */
@media (pointer: fine) {
  a:hover {
    background: red;
  }
}

この簡単な2019 jqueryソリューションを試してみてください。

1. このプラグインをヘッドに追加します：

   src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"

2. これをjsに追加：

   $("*").on("touchend", function(e) { $(this).focus(); }); //applies to all elements

3. これに対する推奨されるバリエーションは次のとおりです。

   $(":input, :checkbox,").on("touchend", function(e) {(this).focus);}); //specify elements
   
   $("*").on("click, touchend", function(e) { $(this).focus(); });  //include click event`
   
   css: body { cursor: pointer; } //touch anywhere to end a focus`

ノート

• ツールチップへの影響を避けるために、該当する場合はbootstrap.jsの前にプラグインを配置します
• SafariまたはChromeを使用するiphone XR ios 12.1.12、およびipad 3 ios 9.3.5でのみテストされています。

参照：

https://code.jquery.com/ui/

https://api.jquery.com/category/selectors/jquery-selector-extensions/