setTimeout()で1秒だけ、キーボードとマウスの入力をできなくする

setTimeout()を使って、1秒間だけ、パソコンからの全てのキーと、マウスでのクリック操作を無効にしたいのですが、一括で、無効にできる方法はありますでしょうか?

setTimeout(function(){ 
 //処理  
}, 1000);

s8_chu

2017/07/16 19:38

全てのキーと、マウスでのクリック操作を無効にしたい対象を追記してください。

行動規範の内容に同意します

回答2件

ベストアンサー

イベントバブリングと event.preventDefault() を利用して下さい。

HTML
1<div id="target">
2  <input type="text">
3  <textarea></textarea>
4
5  <ul>
6    <li><a href="https://developer.mozilla.org/ja/docs/Web/API/Event/preventDefault">event.preventDefault - Web API インターフェイス | MDN</a></li>
7    <li><a href="http://uhyohyo.net/javascript/3_3.html">三章第三回 イベントバブリング — JavaScript初級者から中級者になろう — uhyohyo.net</a></li>
8    <li><a href="https://teratail.com/questions/84524">JavaScript - setTimeout()で1秒だけ、キーボードとマウスの入力をできなくする(84524)｜teratail</a></li>
9  </ul>
10</div>
11
12<script>
13'use strict';
14(function () {
15  function handleClickKeydown (event) {
16    if (this.disableDefault) {
17      event.preventDefault();
18    }
19  }
20
21  function handleTimeout (node, listener) {
22    var doc = node.nodeType ===  node.DOCUMENT_NODE ? node : node.ownerDocument;
23
24    node.removeEventListener('click', listener, false);
25    node.removeEventListener('keydown', listener, false);
26    doc.getElementById('prevent-default-flag').firstChild.data = 'デフォルトアクション有効';
27  }
28
29  function main () {
30    var element = this.document.getElementById('target'),
31        listener = {
32      disableDefault: true,
33      handleEvent: handleClickKeydown
34    };
35
36    element.addEventListener('click', listener, false);
37    element.addEventListener('keydown', listener, false);
38    setTimeout(handleTimeout, 3000, element, listener);
39  }
40
41  main.call(this);
42}.call(this));
43</script>

Re: xjaPAN さん

投稿2017/07/16 22:35

think49

総合スコア18162

xjaPANDA

2017/07/17 17:50

ありがとうございます。javascriptで、キー操作やクリックを無効にするやり方がわからなかったので、とても勉強になります。

think49

2017/07/18 02:23

試行錯誤の名残なのですが、コード上で disableDefault を定義している listener オブジェクトは不要です。汎用性を考え、有効/無効をスイッチする為に定義したオブジェクトですが、3秒間だけ無効化して以降、無効化状態にスイッチする事がないのであれば不要なので削除して下さい。

行動規範の内容に同意します

jQueryを使用した場合、以下のように行えると思いますが、いかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11    </style>
12</head>
13<body>
14<label>
15    <textarea id="textarea1"></textarea>
16</label>
17<button type="button" id="button1">クリック</button>
18<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
19<script>
20    $(function () {
21        $("#button1").on("click", function () {
22            $("#textarea1").on("keydown mousedown", function (e) {
23                e.preventDefault();
24            });
25            setTimeout(function () {
26                $("#textarea1").off("keydown mousedown");
27            }, 1000);
28        });
29    });
30</script>
31</body>
32</html>