C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[1]: Webアプリ　右/左スワイプ無効化にする方法

分類:[JavaScript]　

サーバOSにRaspberry Pi OSを使用してWebアプリケーションを作成しています。
作成したWebアプリケーションは、サーバPC(Raspberri Pi)上で使用します。
(Webの表示は、Chroniumを使用しています)
モニタはタッチパネルを使用しますが、ユーザがスワイプするのを無効化させる方法がわかりません。

以下のサイトを参考に、<script></script>タグ内にスワイプ無効のコードを入れたのですが、スワイプ無効化できませんでした。
https://dev.classmethod.jp/articles/restrict-various-operation-by-screen-touch-in-web-app/

document.addEventListenerはどのコントロールに設定するイベントなのでしょうか？

■No99767 (az さん) に返信

> 以下のサイトを参考に、<script></script>タグ内にスワイプ無効のコードを入れたのですが、スワイプ無効化できませんでした。
> https://dev.classmethod.jp/articles/restrict-various-operation-by-screen-touch-in-web-app/

参考にしていく記事のコードは TypeScript ですが、それをそのまま html ソースに埋め込ん
でも動きません。

そんなことは分かっていて、JavaScript にコンパイルしたが動かないということなら失礼しま
した。

■No99767 (az さん) に返信
> 以下のサイトを参考に、<script></script>タグ内にスワイプ無効のコードを入れたのですが、
> https://dev.classmethod.jp/articles/restrict-various-operation-by-screen-touch-in-web-app/

そこで紹介されているコードは、『(event: any)』という
表記があることから、TypeScript のコード例になっていますね。

今回記述したのは TypeScript ですか? JavaScript ですか?

script タグ内に直接記述するなら、.ts を .js ファイルにコンパイルしてから書くか、
あるいは、最初から TypeScript ではなく JavaScript の文法で書くようにしてみてください。

たとえば addEventListener メソッドで割り当てる方法をとるなら、
　document.addEventListener('touchmove', ev => ev.preventDefault(), { passive: false });
という感じです。ontouchmove プロパティで割り当てる方法もありますが、そちらはあまりお奨めしない。

> document.addEventListenerはどのコントロールに設定するイベントなのでしょうか？
…コントロール?
見ての通り、document オブジェクトに対するイベント割り当てですよ。

なお、左右スワイプ以外のスクロール操作なども無効化されることになるため、
場合によっては、イベント引数の currentTarget に応じて
preventDefault するかどうかを判断した方が良いかもしれません。

■No99769 (魔界の仮面弁士さん) に返信

> たとえば addEventListener メソッドで割り当てる方法をとるなら、
> 　document.addEventListener('touchmove', ev => ev.preventDefault(), { passive: false });
> という感じです。

{ passive: false } ⇒ false とするのではないですか？

■No99769 (魔界の仮面弁士さん) に返信

No99779 は間違いで、{ passive: false } が正解でした。すみません。

C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[1]: Webアプリ 右/左スワイプ無効化にする方法

過去ログには書き込み不可

Re[1]: Webアプリ　右/左スワイプ無効化にする方法