マウスオーバーとクリックイベントの競合

Question

私はクリックとマウスオーバーイベントをリンクにバインドするためにon（）イベントを使用しようとしています。これは基本的にはデスクトップ上でマウスを動かし、モバイルとタブレットをクリックします。私が現在持っている問題は、両方のイベントが同時にトリガされることです。これをきれいに行うことは可能ですか、画面の幅に条件を追加して、デスクトップ上のホバーだけを適用する必要がありますか？モバイルのイベントをクリックしますか？ここでの基本的なJSのフィドル：http://jsfiddle.net/4wr3da8p/

$('div').on('click mouseover', 'a', function(e) { 
    e.preventDefault(); 

    $(this).toggleClass('active'); 
}); 

EDIT： が良い私がやろうとしているかを示すためにjsfiddleを更新しました。隣接する要素の表示を切り替えたいので、CSS疑似クラスが役立つとは思わない。

http://jsfiddle.net/4wr3da8p/

$('div').on('click mouseover', 'a', function(e) { 
    e.preventDefault(); 

    $('.content').toggleClass('active'); 
}); 

Answer 1

私は、ときに何を経験していることは、あなたが最初のクリックのために（実際のクリック前）の位置にマウスを移動すると、「アクティブ」クラスが上のトグルしていることである疑いがあるが、クリックすると、そのクラスはオフに戻ります。これはトグル操作の問題です。

要素がアクティブまたはホバーされたときに特定のクラスを適用し、そうでないときにそのクラスを削除するだけであれば、JavaScriptはまったく必要ありません。あなたはCSSと:hoverと:active疑似クラスだけでそれを行うことができます。両方のシナリオが同時に真実であり、お互いをキャンセルすることを心配する必要はありません。

div:active, div:hover { background:yellow; }

<div> 
 
    <p>This will become yellow when you hover over it or when you click it.</p> 
 
    <p>The class will no longer be applied when you move the mouse out of the area or after the click is done.</p> 
 
</div>

Answer 2

あなたが<input type="checkbox">と<label>要素、#barと#foo要素にアタッチchangeイベント、css:hoverを利用することができ、デスクトップ

Answer 3

のために携帯電話やマウスオーバーのためのjQueryを使ってタップイベントを使用することができます:checked疑似クラス、一般的な兄弟セレクタ~。

$(function() { 
 
    $("#bar").change(function() { 
 
    if (this.checked) { 
 
     $(this).hide().add("#foo").prop("checked", false); 
 
    } 
 
    }); 
 

 
    $("#foo").change(function() { 
 
    if (this.checked) { 
 
     $("[for=bar]").css("display", "inline-block !important"); 
 
    } 
 
    }); 
 
});

#foo, 
 
#bar, 
 
span.bar, 
 
[for="bar"] { 
 
    display: none; 
 
} 
 
[for="foo"]:hover ~ [for="bar"], 
 
#foo:checked ~ [for="bar"], 
 
[for="foo"]:hover ~ .bar, 
 
#foo:checked ~ .bar { 
 
    display: inline-block; 
 
} 
 
[for="bar"] { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<input type="checkbox" id="foo"> 
 
<label for="foo">foo</label> 
 
<br/> 
 
<br/> 
 
<span class="bar">bar</span>&nbsp; 
 
<input type="checkbox" id="bar"> 
 
<label id="close" for="bar">x</label>

デバイスに基づいてjsfiddle http://jsfiddle.net/4wr3da8p/2/