動的に表示される要素のJavaScriptは起動しません

私はタッチイベントで奇妙な動作に気付きました。状況はそうです：#pointercapture divを持っていますが、これはデフォルトでは隠されています。本体にはタッチスタートハンドラが取り付けられており、ポインタキャプチャが表示されます（ボディにオーバーレイされます）。ポインタキャプチャはイベントを添付して、それを隠します。問題は、タッチスタート時にポインタキャプチャが表示され、それが隠れていないことです。あなたはスクリーンをタッチしてもう一度離して、これが消えるようにしなければなりません。ここはフィドルです。私はまた、マウスイベントを添付しています。これは期待通りに機能します（最初のマウスアップ時にポインタキャプチャが隠されます）。 https://jsfiddle.net/3p8eyug5/動的に表示される要素のJavaScriptは起動しません

HTML

<body> 
<div id="pointercapture"></div> 
</body>

CSS

body { 
    width:500px; 
    height:500px; 
    background:green; 
} 
#pointercapture { 
    display:none; 
    position:fixed; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    background:orange; 
}

はJavaScript

var $=jQuery; 
$('body').on('touchstart mousedown', function(e) { 
    $('#pointercapture').show(); 
    e.preventDefault(); 
}); 

$('#pointercapture').on('touchend mouseup', function(e) { 
    $(this).hide(); 
    e.preventDefault(); 
});

誰かがこの動作を説明できますか？私はまた、ポインタイベントとタッチでどのように動作するのか不思議です、私は今それをチェックする方法がありません。

出典

2016-04-01 Maciej Krawczyk

これは予想される動作です。ボディがタッチスタートイベントをキャプチャすると、それはタッチアクション全体を保持します（タッチイベントは表示されたら#pointercaptureに転送されません）。あなたは#pointercaptureではなくtouchendイベントをボディに置くだけでよいでしょう。

$('body').on('touchstart mousedown', function(e) { 
    $('#pointercapture').show(); 
    e.preventDefault(); 
}); 

$('body').on('touchend mouseup', function(e) { 
    $('#pointercapture').hide(); // also change this to #pointercapture 
    e.preventDefault(); 
});

https://jsfiddle.net/3p8eyug5/1/

出典

2016-04-01 18:10:01 atheaos

ありがとうございます。実際にそれが起こる方法は私には有益です、私はそれがどのように機能するか興味があっただけでした。ポインタイベントの場合と同じ場合は知っていますか？ –

@ Iron96です。どちらの場合も、イベントフローは発信者によって保持されます。 – atheaos

動的に表示される要素のJavaScriptは起動しません

答えて

関連する問題