33

Webアプリを作成しましたが、少し磨きをかけるために、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なしで機能させる方法はありますか？

4

4 に答える 4

73

あなたが探している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

アップデート

イベントハンドラー内の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;

    ...
})...

アップデート

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

//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イベントを強制的に連続して実行できますが、ここでの実際のユースケースについてはよくわかりません。

于 2012-06-21T19:20:22.973 に答える
6

代わりに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/

于 2014-07-07T23:31:43.113 に答える
4

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

  • 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>

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

于 2014-07-02T20:52:46.977 に答える
1

タッチデバイスにはtouchstartまたはtouchendを使用します。

ほとんどの場合、タッチスタートとマウスダウンをキャッチしたいです。ただし、ハンドラーがトリガーされるのは1回だけであることを確認する必要があります。これを行う最も簡単な方法は、両方をキャッチしてe.preventDefault（）を呼び出すことです。

$("#button_img").on('touchstart mousedown', function(e) {
  //your code...

  e.preventDefault(); //prevents further events from being dispatched
}

ソース：developer.mozilla.org：

単一のユーザー入力が原因でブラウザがタッチイベントとマウスイベントの両方を発生させる場合、ブラウザはマウスイベントの前にタッチスタートを発生させる必要があります。したがって、アプリケーションが特定のタッチターゲット要素でマウスイベントを発生させたくない場合、要素のタッチイベントハンドラーはpreventDefault（）を呼び出す必要があり、追加のマウスイベントはディスパッチされません。

于 2021-01-24T21:01:03.123 に答える