0

touchpress通常のJQueryを使用してオブジェクトをバインドできるというカスタムイベントを作成したいと思います.bind()。

これが私が現在ボタンのタッチプレスをどのように解決するかです：

$("#myButton").bind("touchstart", function() {
    var startTime = new Date().getTime();
}).touchend(function() {
    var duration = new Date().getTime() - startTime;
});

ただし、任意の要素をこのイベントにバインドして、タッチプレスイベントをトリガーできるようにしたい

$("#myButton").bind("touchpress", onTouchPress);

トリガーを使用しようとしました：

$(document).trigger("touchpress", duration);

しかし、それを何にバインドするかを知りませんでした。また、タッチスタートイベントを何にバインドするのかわかりませんでした。これらのピースを接着するのを手伝ってくれる人はいますか？

4

4 に答える 4

1

touchpressラッパー：

$.fn.touchpress = function(fn){
  var startTime;
  return this.on({
    "touchpress": fn,
    "touchstart": function(){
      startTime = new Date().getTime();
    },
    "touchend": function(){
      var duration = new Date().getTime() - startTime;
      $(this).trigger("touchpress", duration);
    }
  });
};

使用法：

$("span").touchpress(function(evt, duration){
  console.log(duration);
});

</ p>

于 2012-08-06T20:59:49.407 に答える
0

HTML：

<div id="main_content"></<div>

JSコード：

document.getElementById('main_content').ontouchstart=onStartFunction;
/* or for multiple elements using jquery*/
$('.myBtns').each(function(){
   this.ontouchstart=onStartFunction;
});

function onStartFunction(e){

      //e.stopPropagation(); // if necessary

      // your code goes here

}

e.stopPropagation（）を使用すると、ontouchstart、ontouchmove、ontouchendなど、好きなすべてのイベントをバインドできます。これにより、イベントがバブルするのを防ぐことができます。

于 2012-08-06T20:31:07.837 に答える
0

javascriptでは大文字と小文字が区別されます。

イベントをバインドしますtouchPressが、その後トリガーしtouchpressます。これらは同じイベントではありません。

于 2012-08-06T20:24:50.470 に答える
0

イベントのバブリングは、DOMツリーを上っていきます。

したがって、ハンドラーを「myButton」にアタッチする場合は、要素で直接、またはその要素の子でイベントをトリガーする必要があります。

バインド：イベントがそのイベントにバインドされた関数を持つ要素に到達したときに起動する関数をアタッチします

トリガー：最上位の要素に到達するか、ハンドラーがevent.stopPropagation（）を呼び出すまで、ソース要素からそのdom階層の上位にあるイベントを発生させます。

例：

dom構造：

document->body->div->button[id=myButton]

dom内の任意の要素で任意のイベントをバインドできます

button [id=myButton]から発生した場合のイベントバブリング

button[id=myButton]->div->body->document

あなたの場合：

$("#myButton").trigger("touchpress"); //this triggers the handler that will respond to touchpress

イベントをトリガーする必要がある要素のソースがわからない/知りたくない場合は、それらの要素にマーカークラスを追加し、各要素で手動でイベントをトリガーできます。

$('.has-touchpress-handler').trigger('touchpress');
于 2012-08-06T20:25:29.633 に答える