web-dev-qa-db-ja.com

入力がタッチされたか（タブレット）、クリックされたか（マウス）を検出する

デスクトップとタブレット（iPad、Androidまたはサーフェス）で起動するWebアプリを開発しています。今、数値入力用の独自のキーボードを構築しています。フォーカスを設定すると、マウスクリックのある入力フィールドでは、コスタムキーボードが正しく開きます。ただし、タッチ（タブレット）での入力にフォーカスを設定すると、デフォルトのキーボードも開きます。またはタッチされたクリックです。タッチされたクリックの場合、readonly = "true"プロパティを入力に設定できるため、テーブル上のデフォルトのキーボードがスライドインしません。

それがクリックされた「タイプ」（タッチまたはマウス）を検出または確認する方法はありますか？.

javascripthtmlkeyboardclickdetect
11
webta.st.ic

touchendとclickの両方のアクションのイベントを定義してから、イベントのタイプを使用してトリガーされるアクションを検出できます。

$('#element-id').on('click touchend',function(e){
  if(e.type=='click')
      console.log('Mouse Click');
  else
      console.log('Touch');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="element-id">Click here</button>

お役に立てれば。

6
Zakaria Acharki

@ザカリア・アチャルキ

        <script type="text/javascript">
        $(document).ready(function(){
            $(".cCostumeKeyboard").on("click touchstart",function(e){
                if(e.type=="click") {
                    alert("Mouse");
                    alert(e.type);
                }
                else if(e.type=="touchend"){
                    alert("Touch");
                    alert(e.type);
                    e.preventDefault();
                    e.stopPropagation();
                }
            }); 
        });
    </script>

このスニペットをタッチデバイスで試してください。これは、入力の最初のタッチの後に続きます。

  • 警告：「タッチ」
  • 警告：「タッチエンド」
  • 警告：「マウス」
  • 警告：「クリック」
1
webta.st.ic