JS：e.preventDefault()した後にイベントを発生させる

JS：e.preventDefault()した後にイベントを発生させる

author : koki

publish date :

JavaScriptをスクラッチから書いていると、一旦e.preventDefault()でデフォルトの動きを止め、なんらかの処理をしてからデフォルトの処理を行いたい時があると思います。今回はサンプルでformの送信ボタンを押したときに一度デフォルトの処理を止め、簡単なバリデーションを行いエラーがなければデフォルトの処理を実行する方法を例に挙げ、JavaScriptとjQueryでの書き方をご紹介します。

目次

JavaScript

JavaScriptで書く場合はこんな感じになります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var preventEvent = true;
document.body.onclick = function(e){
    var thisTarget = e.target;
    if(thisTarget.tagName.toLowerCase() == 'input' && thisTarget.type == 'submit'){
        if(preventEvent){
            e.preventDefault();
            // 処理を記述
            if(document.getElementById('test').value == ''){
                if(document.getElementsByTagName('p').length == 0){
                    var newTag = document.createElement('p');
                    newTag.className = 'fontRed';
                    newTag.innerHTML = '記入してください';
                    document.getElementsByTagName('form')[0].appendChild(newTag);
                }
            }else{
                preventEvent = false;
                thisTarget.click();
            }
        }
    }
};

ここでのポイントはbodyで全てのクリックを検出して、if文内の

1
thisTarget.tagName.toLowerCase() == 'input'

で押された要素の種類と

1
thisTarget.type == 'submit'

押された要素のtype属性が一致すれば分岐処理に入るようにしています。
仮に条件が増えた場合も、同様な書き方で追記していけばいいだけなのでメンテナンスも比較楽に出来ると思います。

jQuery

jQueryで書く場合は、もう少しシンプルに書けます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var preventEvent = true;
    $('input[type="submit"]').click(function(e){
        if(preventEvent){
            e.preventDefault();
            // 処理を記述
            var targetElm = $('#test');
            if(targetElm.val() == ''){
                if($('p.fontRed').length == 0){
                    targetElm.parents('form').after('<p class="fontRed">記入してください</p>');
                }
            }else{
                preventEvent = false;
                $(this).trigger('click');
            }
        }
});

jQueryを使えば簡単に特定の要素のクリックを検出できるので、コードもシンプルに書けます。

今回はformのサンプルコードを作成してみましたが、目的に合わせて条件やセレクタを変えてみたりしてみてください。