web-dev-qa-db-ja.com

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

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

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

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

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

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

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

javascriptjqueryjquery-eventstouchstart
7
user1031947

要約すると、あなたは欲しいようです：

  • タッチスタート時：スタイル設定されたdiv要素を表示および配置します。
  • 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はデスクトップテストを可能にし、タッチデバイスの使用のために削除できます。

[〜＃〜]デモ[〜＃〜]

5
Roamer-1888

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

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ラッパーで実際にトリガーされます

0
Huangism