8

私はiPad用のJavascript / html5プロジェクトに取り組んでいます。

イベントが発生するまで(つまり、人が画面に指を置いた後DOMまで)追加されない要素の touchmove イベントをキャッチできるようにする必要があります。touchstart

イベントをシミュレートして、touchstartプログラムで起動しようとしました...

$( "#container" ).append( element );
element.on( "touchmove", doStuff );
var ev = $.Event( "touchstart" );
element.trigger( ev );

...しかし、これは機能しません。発砲を開始できる唯一の方法はdoStuff、指を離してからもう一度画面に触れて、2 番目のtouchstartイベントをトリガーすることです。

指が既に画面上にtouchmoveある後に追加された要素のイベントをキャッチするにはどうすればよいですか?DOM

4

3 に答える 3

6

要約すると、次のことが必要なようです。

  • on touchstart: スタイル付きの div 要素を表示して配置します。
  • on touchmove:マウス ボタンを離して再度押すことなく要素をドラッグします。

この解釈が正しければ、答えは、最初にクリックされたのと同じ要素、つまり「body」要素で touchmove イベントを処理することです。ドラッグしたい要素（追加された要素）の touchmove イベントを処理する必要はありません。

コードの書き方はたくさんあるはずです。これはおそらくあなたが望むものではありませんが（主にポジショニング数学で）、簡単に適応できるはずです：

var $element = $("<div class='element' />");

$("body").on({
    'touchstart mousedown': function (e) {
        $element.appendTo("body");
        $(this).on('touchmove mousemove', move);
        move(e);//you could do `$(this).trigger('touchmove', e)` but a conventional function call keeps `move` simple.
    },
    'touchend mouseup': function (e) {
        $(this).off('touchmove mousemove');
    }
});

function move(e) {
    $element.css({
        left: (e.pageX - 10) + 'px',
        top: (e.pageY - 10) + 'px',
        cursor: 'pointer'
    });
}

mousedown/mousemove/mouseup は、デスクトップ テストを可能にし、タッチ デバイスの使用のために削除できます。

デモ

于 2014-09-19T15:04:05.887 に答える
0

一度だけトリガーする必要がある場合は、非常に簡単です

function addElement() {
    $( "body" ).append( element );

    element.on( "touchmove", doStuff );
    element.trigger("touchmove"); 
}

http://jsfiddle.net/rx4qdtuj/8/

これをiPadシミュレーターで確認しました。アラートを追加に置き換えたので、ipad で常にアラートが表示されることはありません。

継続的にトリガーしたい場合、私が考えることができる唯一のことは、作成された要素でタッチムーブを偽造することでした

http://jsfiddle.net/rx4qdtuj/9/

var element = $("<div class='element' />");

$( "body" ).on( "touchstart", addElement );
$(".wrapper").on("touchmove", addElement);

function addElement() {
    $( "body" ).append( element );

    element.on( "touchmove", doStuff );
    element.trigger("touchmove"); 
}

function doStuff() {
    $('body').append('a ')
}

HTML

<div class="wrapper"></div>

CSS

.wrapper {
    position: absolute;
    top: 100px;
    left: 100px;
    width: 300px;
    height: 300px;
}

移動は、作成された要素と同じ場所にある既に作成された div ラッパーで実際にトリガーされます

于 2014-09-18T19:52:08.367 に答える