前提
スマホで長押しするとメニュー表示させたい。
PCでは右クリックで実装完了、スマホの長押しが上手く実装できません。
実現したいこと
チャット機能でメッセージ上を長押し、メニュー表示させたい。
アラート表示は見つけられたのですが、オリジナルの内容を表示する方法が見つけられませんでした。
該当のソースコード
html
1<div id="long-press"> 2 チャットメッセージ内容 3 4 <!-- クリックメニューここから--> 5 <div id="menu"> 6 <ul> 7 <li>返信</li> 8 <li>コピー</li> 9 <li>編集</li> 10 <li>削除</li> 11 <li>転送</li> 12 </ul> 13 </div> 14 <!-- クリックメニュー ここまで--> 15 16</div> 17 18
試したこと
js
1const longPress = { 2 //プロパティ 3 el: '', 4 count: 0, 5 second: 1, 6 interval: 10, 7 timerId: 0, 8 9 //メソッド 10 init: function(param){ 11 //引数のパラメータ取得 12 this.el = document.querySelector(param.el); 13 this.second = param.second; 14 //イベントリスナー 15 this.el.addEventListener('touchstart', ()=>{ this.start() }, false); 16 this.el.addEventListener('touchend', ()=>{ this.end() }, false); 17 }, 18 start: function(){ 19 this.timerId = setInterval(()=>{ 20 21 this.count++; 22 23 if(this.count / 100 === this.second ){ 24 //長押し判定時の処理 25 this.myFunc(); 26 this.end(); 27 } 28 29 }, this.interval); 30 }, 31 end: function(){ 32 clearInterval(this.timerId); 33 this.count = 0; 34 }, 35 myFunc: function(){ 36 alert('ボタンを' + this.second + '秒長押ししました!'); 37 } 38} 39 40//初期化 41longPress.init({ 42 el: '#long-press', //長押しの判定を取りたい要素のセレクタを指定する 43 second: 1, //長押しの秒数を指定する 44}); 45
下記箇所を
js
1 myFunc: function(){ 2 alert('ボタンを' + this.second + '秒長押ししました!'); 3 }
このようにしてみましたが動きません。(すみません、全くおかしなコードかもしれません)
js
1 myFunc: function () { 2 var menu = document.getElementById('menu'); 3 console.log(menu); 4 }
補足情報(FW/ツールのバージョンなど)
参照HP
https://into-the-program.com/javascript-click-touch-long-press-detect/
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/09/13 11:28
退会済みユーザー
2022/09/13 12:18
退会済みユーザー
2022/09/13 12:20
2022/09/13 14:51
2022/09/13 14:54
退会済みユーザー
2022/09/13 16:03