web-dev-qa-db-ja.com

jqueryのmousedown / mouseupはiPadで動作しますか？

私は現在のコードを使用しています：

$('body').mousedown(function() {
        $('div#extras').fadeTo('fast', 1);
});

$('body').mouseup(function() {
        $('div#extras').delay(2000).fadeTo(1500, 0);
});

これはサファリでうまく機能しますが、アップロードしてiPadでチェックアウトしても機能しませんか？

jqueryipadonmousedown
36
Annie

興味のある人のためにiPadでこれを行う方法を見つけました：

私の質問で使用したコードの代わりに、次を使用します。

$('body').bind( "touchstart", function(e){
        $('div#extras').fadeTo('fast', 1);
});

＆

$('body').bind( "touchend", function(e){
        $('div#extras').delay(2000).fadeTo(1500, 0);
});
84
Annie

ではない正確に。

Apple Docs

見積もり：

クリック可能な要素は、リンク、フォーム要素、イメージマップ領域、またはmousemoveを持つ他の要素です。mousedown、 mouseup、またはonclickハンドラー。スクロール可能な要素は、適切なオーバーフロースタイル、テキスト領域、およびスクロール可能なiframe要素を持つ要素です。これらの違いにより、「 Make Elements Clickable 」で説明されているように、一部の要素をクリック可能な要素に変更して、iPhone OSで目的の動作を実現する必要があります。

（エンファシス鉱山）

8
scunliffe

本当にあなたの質問に答えているわけではありませんが、「jQuery mousedown/mouseup on ipad」を探すためだけにここに来た人にとっては便利かもしれません

私は常にこの小さなトリックを使用します。

$(element).hover(function() {
   // Do something
});

これは、iPadを使用しているときにタッチでトリガーされますおよび要素の外側をクリックするとアクションが反転しますこれはホバーイベントであるためです。たとえば、次のとおりです。

// Assuming the element has 'opacity: 0' in CSS

$(element).hover(function() {
   $(this).animate({'opacity': 1}, 200);
});

「クリック時」のフェードイン効果と「マウスアップ時」のフェードアウト効果を作成します。

6
Jeffrey Roosendaal

古い投稿ですが、普遍的な解決策があります：

$('body').on('mousedown touchstart',function(e){
    $('div#extras').fadeTo('fast', 1);
});
$('body').on('mouseup touchend',function(e){
    $('div#extras').delay(2000).fadeTo(1500, 0);
});

mousedownでtouchstartを使用し、mouseupでtouchendを使用していることがわかります。これは、モバイルおよびデスクトップの使用を対象としています。

2
Ivijan Stefan Stipić