2

Zepto を使用して、モバイル Web アプリのリンクをオンクリックからタップに簡単に書き換えることはできますか? 現在、onclick のすべてのインスタンスに対して $.tap コマンドを実行したいと考えています。

例えば

<a href="#" tap="doSomething(); return false;">Link</a>

これは可能ですか、またはonclickが起動しないようにする方法はありますが、onclickメソッドを使用して$.tapメソッド内で呼び出しますか?

Zepto を使用して高速ボタンを作成するための提案はありますか?

4

2 に答える 2

2

よりエレガントな方法は、クリックトリガーを変数に保存し、タッチスクリーンデバイスを扱うときにその変数を「クリック」から「タッチスタート」に再マップすることです。

ここでは、グローバル オブジェクト変数 myUtils を使用して、クリック イベントを格納します。このイベントの値は、デフォルトで「クリック」に設定されています。

var myUtils = myUtils || {};
myUtils.events = myUtils.events || {
  click : "click"
};

タッチスクリーンが検出された場合は、myUtils.events.click プロパティの値を「touchstart」に変更します。

if (typeof document.body.ontouchstart !== "undefined") {
  myUtils.events.click = "touchstart";
}

ここで、クリック イベントを要素にバインドするときに、イベントの名前に myUtils.events.click プロパティを使用します。

$(function() {
   $("#link").bind(myUtils.events.click, function(e) {
     alert("I'm a " + e.type);
     e.preventDefault();
   });
});​

このようにして、「タッチスクリーンですか？」 を実行するだけで済みます。アプリケーションで一度テストすると、その後必要に応じて「touchstart」または「click」にバインドします。モバイル デバイスで不要なクリック イベントをキャンセルすることを心配する必要はありません。そのイベントは最初からバインドされていないからです。

e.preventDefault() 呼び出しは、リンクがたどられないようにします (#link が href リンクであると仮定します)。

JSFiddle バージョン: http://jsfiddle.net/BrownieBoy/Vsakw/

このコードは、タッチスクリーン デバイスが単なるタッチスクリーン デバイスであると想定していることに注意してください。つまり、電話またはタブレットです。タッチスクリーン PC を使用している場合、マウスで使用することはできません。

于 2012-07-09T08:33:00.017 に答える
0

ok so the way i understand you is you want different behaviors on mobile and desktop but with the same code. If so then you need to identify which platform you are on then define your code

if(MOBILE) {
    $('element').click(function(){
        return false;
    });

    $('element').on('touchstart', function(){
        // functionality of the onclick written here
    });
}
else {
// desktop event listeners
}
于 2012-05-09T18:22:48.793 に答える