web-dev-qa-db-ja.com

jQueryモバイルなしでモバイルでmousedownイベントを使用しますか？

私はwebappを構築しましたが、少し洗練させるために、mousedownおよびmouseupハンドラーを追加して、イメージをスワップアウトしました（この場合、ボタンが押されているように見せます）。

私のコードは次のようなものです：

window.onload = function() {
    //preload mouse down image here via Image()
    $("#button_img").mousedown(function(){$("#button_img").attr("src","button_on.png");});
    $("#button_img").mouseup(function(){$("#button_img").attr("src","button_off.png")});
}

これはデスクトップでも遊べますが、モバイル（iOS Safariでテスト）では、mousedownイベントとmouseupイベントが同時に発生するため、事実上何も起こりません。

JQueryMobileでvmousedownイベントとvmouseupイベントを使用しようとしましたが、このコードは次のとおりです。

//include jquerymobile.js and jquerymobile.css 
window.onload = function() {
    //preload mouse down image here via Image()
    $("#button_img").vmousedown(function(){$("#button_img").attr("src","button_on.png");});
    $("#button_img").vmouseup(function(){$("#button_img").attr("src","button_off.png")});
}

Vmousedownとvmouseupが存在しないというエラーを教えてください。また、jQueryMobileは、ページ用にすでに記述したCSSをオーバーライドします。

それで、vmousedownとvmouseupを動作させる方法がありますか、jQuery MobileのCSSなしで動作させる方法はありますか？

javascriptjqueryjquery-mobilemouseevent
26
Esaevian

touchstartとtouchendを探しています。これらは、vmousedownとvmouseupが模倣しようとするイベントです。

以下に例を示します。

window.onload = function() {
    //preload mouse down image here via Image()
    $("#button_img").bind('touchstart', function(){
        $("#button_img").attr("src","button_on.png");
    }).bind('touchend', function(){
        $("#button_img").attr("src","button_off.png");
    });
}

これは、タッチイベントをサポートするデバイスでフレームワークなしで機能します。 Modernizr のようなものを使用してこのテストを行い、デバイスがタッチイベントをサポートしていない場合は、通常のデスクトップイベントにバインドします。

touchstart/touchend/touchmoveを使用すると、一度に発生するタッチの数など、いくつかの興味深い情報が得られるため、ユーザーがスクロールしているかどうかを検出できます。ズームします。

[〜＃〜] update [〜＃〜]

イベントハンドラー内のeventオブジェクトはタッチイベントとマウスイベントで異なるため、どちらにしてもイベントの座標を知りたい場合は、次のようなことができます（以下の例ではModernizrが読み込まれていると仮定しています） ：

//determine which events to use
var startEventType = 'mousedown',
    endEventType   = 'mouseup';

if (Modernizr.touch === true) {
    startEventType = 'touchstart';
    endEventType   = 'touchend';
}

//bind to determined event(s)
$("#button_img").bind(startEventType, function(event) {

    //determine where to look for pageX by the event type
    var pageX = (startEventType === 'mousedown')
                ? event.pageX
                : event.originalEvent.touches[0].pageX;

    ...
})...

[〜＃〜] update [〜＃〜]

私はこれを見ていましたが、イベントハンドラをバインドする前にイベントタイプを検出する必要はないようです：

//bind to determined event(s)
$("#button_img").bind('mousedown touchstart', function(event) {

    //determine where to look for pageX by the event type
    var pageX = (event.type.toLowerCase() === 'mousedown')
                ? event.pageX
                : event.originalEvent.touches[0].pageX;

    ...
})...

両方のイベントを連続して受信することが心配な場合は、タイムアウトを使用してイベントハンドラーを調整できます。

//create timer
var timer = null;

//bind to determined event(s)
$("#button_img").bind('mousedown touchstart', function(event) {

    //clear timer
    clearTimeout(timer);

    //set timer
    timer = setTimeout(function () {

        //determine where to look for pageX by the event type
        var pageX = (event.type.toLowerCase() === 'mousedown')
                    ? event.pageX
                    : event.originalEvent.touches[0].pageX;

        ...

    }, 50);
})...

注：mousedownおよびtouchstartイベントを開発者ツールを使用してすばやく連続して強制することができますが、ここでの実際の使用例についてはわかりません。

59
Jasper

JQueryMobileのvmouseup、vmousedown、vmousemove、vclickなどの機能を、残りすべて（特に側面を取得せずに）取得する方法があります。効果）jquerymobileの（つまり、拡張、追加のcssなど）

  • http://jquerymobile.com/download-builder/ （必要なコンポーネントのみを含むjquerymobileのカスタムビルドをダウンロードするためのツール）に移動します。
  • 「仮想マウス（vmouse）バインディング」のみを選択します
  • ダウンロードしてください。

ダウンロードには、単一の.jsファイルのみが含まれます（最小化バージョンと非圧縮バージョンの両方）。 CSSはありません。

プレーンjqueryの後、このスクリプトをHTMLのヘッドにリンクし、次のように使用します。

_<head>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
  <script src="whatever/path/jquery.mobile.custom.min.js"></script>
  <script>
    $(function(){ // or replace this with window.onload for that matter
      // Your code here, e.g.
      $("#button_img").on("vmousedown", function() { 
        /*whatever*/
      });
      // CAUTION: this won't work (see note below):
      // $("#button_img").vmousedown(function(){/*whatever*/}); // WON'T WORK
    });
  </script>
</head>
_

[〜＃〜] note [〜＃〜]：メソッド.vmousedown()、.vmouseup()など動作しません。イベントリスナーを.on("vmousedown", ...)にバインドする必要があります。理由はわかりません：これは、イベントと同じ名前のショートカットメソッドを作成するjquerymobileの一部が他のモジュールにあるためだと思います。たぶん、それがどのモジュールであるかを把握してダウンロードに含めることは可能かもしれませんが、他の望ましくない依存関係を含めることを強制すると思います。

4
matteo

代わりにCSSを使用してボタンのスタイルを検討しましたか？ :active状態は、ユーザーが要素をクリック/タッチしたときにトリガーされます。以下に例を示します。

/* Default state */
#button_img {
    background-image: url('button_off.png');
}

/* Clicked/touched state */
#button_img:active { 
    background-image: url('button_on.png');
}

CSSのほうがはるかにパフォーマンスが高く、懸念事項（ディスプレイとロジックなど）をより適切に分離することもできます。

JSBin： http://jsbin.com/beyin/1/

4
pseudosavant