ドゥアイネットのプログラマー、湯川が開発日記を綴ります。

CALENDAR
S M T W T F S
    123
45678910
11121314151617
18192021222324
252627282930 
<< November 2018 >>
ARCHIVES
CATEGORIES
<< タップしたときの操作感 | main | 不要なimport文の削除 >>
jquery mobleの「tap」イベント
 jquery mobleを使っているのですが、
ボタンをタップしたときの処理が続けて2回実行されていまいました。

以下のように「tap」イベントをセットすると

$('#ansclear').bind('tap',this.clearClick);

「clearClick」が2回続けて実行されていまいます。。


最新の「jquery.mobile-1.0a4.1.min.js」を使用すると
イベントが2回実行されることはなくなりましたが
タップしてから間があって実行される感じになっていまいました。
「click」イベントと同じ動きのような感じです。

画像

できれば、タップしてからの間がない状態で
正しく実行されるようにしたいと思い、いろいろ試しました。

まず、2回実行されるうちの1回目には
「clientX」などの値が設定されていないことがわかりました。

値が設定されていないイベントの方が先に発生して、
後で発生するイベントには「clientX」などに値が入っていました。

そこでこうしてみました。
this.clearClick = function (event){

  //二度押しが発生するので制御
  //座標がとれているイベントは無視
  if (event.clientX != undefined && event.clientY != undefined){
    return;
  }
 
  処理・・・
 
}

これでイベントを1回に絞ることができた!
と思い実機テストをしていると。。

まだ、2回実行されてしまうことがありました。

さらに調べると、「clientX」などに値が設定されていないイベントも
続けて発生することがあるようです。

制御を追加して、以下のようにしました。

this.clearClick = function (event){

  //二度押しが発生するので制御
  //座標がとれているイベントは無視
  if (event.clientX != undefined && event.clientY != undefined){
    return;
  }
 
  //時間差が100以下のイベントは無視
  if (beforeTimeStamp != undefined){
    if (event.timeStamp - beforeTimeStamp < 100){
      return;
    }
  }
 
  beforeTimeStamp = event.timeStamp;
 
  処理・・・
 
}

イベントの「timeStamp」を使用して、
前回のイベント発生からの間隔が100以下の場合は実行しないようにしました。

これでようやく、2回実行を回避して、タップしてすぐに処理が実行できるようになりました。
| jquery mobile | 13:20 | comments(1) | - |
コメント
http://www.jordan11spacejams.us.com/ jordan 6
http://www.pumafentyrihannashoes.us.com/ puma sneakers mens
http://www.kd10-shoes.us.com/ nike kd 8
http://www.adidasyeezy-350.us.com/ ultra boost mens
http://www.airmax90shoes.us.com/ nike air max 2018
http://www.curry4-shoes.us.com/ curry 2
http://www.nikeairmax-90.us.com/ nike shoes
http://www.louboutinredbottoms.us.com/ louboutin shoes
http://www.adidasnmdrunnerr1.us.com/ adidas nmd womens
http://www.birkenstocksandalssale.us.com/ birkenstock outlet
http://www.adidas-ultraboost.us.com/ yeezy boost 350
http://www.salomonspeedcross3.us.com/ salomon
http://www.lebron15-shoes.us.com/ kyrie irving shoes
http://www.pandorajewelryrings.us.com/ pandora bracelet
http://www.pandorajewelryscharms.us.com/ pandora jewelry
http://www.pandora-jewelrysale.us.com/ pandora jewelry
http://www.katespadepurses.us.com/ kate spade wallet
http://www.jordans11shoes.us.com/ jordan 10
http://www.longchampbag.us.com/ longchamp backpack
http://www.fitflops-sale.us.com/ fitflop uk
http://www.nikeairvapormaxflyknit.us.com/ nike air max 2016
http://www.kyrie-4.us.com/ nike kyrie
http://www.hermesbirkin-handbags.us.com/ hermes belts
http://www.yeezyboost350shoes.us.com/ adidas yeezy boost 350
http://www.fitflopsshoes.us.com/ fitflop shoes
ドリフトliuyuzhen
| jordan 11 | 2018/03/24 12:51 AM |
コメントする