2016-12-17 17 views
1

私はクリックとマウスオーバーイベントをリンクにバインドするために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'); 
}); 
+0

バインドイベント...デバイスを確認します:http://stackoverflow.com/questions/3514784/what-is-the-best-モバイルデバイスの検出方法 –

+0

マウスオーバーするとクリックは発火しませんが、クリックするとマウスオーバーが発生します。 –

+0

質問にあなたのコードを含めるべきであり、あなたが達成しようとしていることも完全に明確ではありません。ホバー/タップはマルチデバイスUIの一般的な設計上の問題ですが、どのようにアプローチするかはUIに依存します。通常は、意味論的で可能な限り高いレベルのイベントに固執したいと考えます。 – pvg

答えて

0

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

要素がアクティブまたはホバーされたときに特定のクラスを適用し、そうでないときにそのクラスを削除するだけであれば、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>

+0

これは実際にはSafari Mobileでは動作しません。これはクリック可能/有効化可能要素 – pvg

0

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

0

のために携帯電話やマウスオーバーのための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/

関連する問題