form_tag要素の発火を細かく指定するには

環境

Rails5.2
Vagrant + Ubuntu20.4
JavaScript

内容

ファイルを選択するダイアログ画面を表示するとき、Viewの中で下記のような記述をします。idは、form_tag、file_field_tag、submit_tagの各要素にそれぞれ設定することができます。

index.html.slim

.form-group.row
    = form_tag xxxxx_path, multipart: true, class: 'mb-3', id: 'tag_form' do 
        = file_field_tag :file, id: 'tag_file'
        = submit_tag "実行", class: 'btn btn-primary', id: 'tag_submit'

上記のコードを動かすと下記のように表示されます。

３種類の要素でそれぞれクリックイベントを発火させた場合、どこのロジックに入ってくるか確認してみます。

xxxxx.js

document.addEventListener('turbolinks:load', function() {
    document.getElementById('tag_form').addEventListener('click', function() {
        alert("クリック１");
    })

    document.getElementById('tag_file').addEventListener('click', function() {
        alert("クリック２");
    })

    document.getElementById('tag_submit').addEventListener('click', function() {
        alert("クリック３");
    })
}, false)

《ファイルを選択》をクリックすると、下記の２つのアラートが表示されます。つまり、file_field_tag要素、form_tag要素の順番でイベントが発火しています。

《実行》をクリックすると、下記の２つのアラートが表示されます。つまり、submit_tag要素、form_tag要素の順番でイベントが発火しています。

まとめ

• 《ファイルを選択》、《実行》のどちらをクリックしても、同じイベントを発火させたい場合は、form_tag要素のidを指定します。

• 《ファイルを選択》をクリックしたときだけイベントを発火させたい場合は、file_field_tag要素のidを指定します。

• 《実行》をクリックしたときだけイベントを発火させたい場合は、submit_tag要素のidを指定します。