Q&A
質問タグに「JavaScript」を追加してください。
前提・実現したいこと
PythonとDjangoを使用したWebアプリを開発しています。
ブラウザに表示されているテキストボックスに文字を入力し、その下に表示されている2つの画像の内どちらかをクリックすると、クリックした画像に紐づいたURLの末尾に入力した文字列を結合したURLをブラウザで開くところまでは実現できたのですが、画像をクリックする際に、左クリックの場合は同じタブで開き、ミドルクリックの場合は新しいタブで開くという動作が実現できていません。
該当のソースコード
html
1 2index.html 3 4<html> 5 <body> 6 <form id="form-id" method="post" action="output"> 7 8 <input value="" autofocus placeholder="ここに文字を入力" required type="text" name="moji"> 9 10 <input type="hidden" value="img_0" name="img_type"> 11 <a href="javascript:void(0);" onclick="document.getElementById('form-id').submit();" onmousedown="document.getElementById('form-id').submit();" > 12 <img src="{% static 'img_0.png' %}" alt="aaa"> 13 </a> 14 15 <input type="hidden" value="img_1" name="img_type"> 16 <a href="javascript:void(0);" onclick="document.getElementById('form-id').submit();" onmousedown="document.getElementById('form-id').submit();" > 17 <img src="{% static 'img_1.png' %}" alt="aaa"> 18 </a> 19 20 </form> 21 </body> 22</html>
Python
1views.py 2 3def output(request): 4 5 srch_url = [ 6 'https://srch_url_0/', 7 'https://srch_url_1/', 8 ] 9 10 input_data = request.POST["moji"] 11 input_type = request_POST['img_type'] 12 13 if input_type == "img_0": 14 open_url = srch_url[0] + input_data 15 elif input_type == "img_1": 16 open_url = srch_url[1] + input_data 17 18 return HttpResponseRedirect(open_url)
試したこと
もともとは、input type="image" で画像を表示させてsubmitでviews.pyにリクエストを送信していたのですが、その場合はミドルクリックが反応しないため、hrefにしました。
左クリックを検出？するonclickとミドルクリックを検出？するonmousedownがあることは分かったのですが、それらを利用してどうすればviews.pyで条件分岐できるかがわかりません。
def output(request, event):
として、マウスのイベントを取得しようとしましたが、eventと記載するだけでエラーになり、これは違うのだろうと思いました。
補足情報（FW/ツールのバージョンなど）
Python 3.7.2
Django 2.2.4
windows10
何卒、ご教示よろしくお願いいたします。
回答2件
0
どうすればviews.pyで条件分岐できるかがわかりません。
別タブで開くという処理はサーバ側でなくクライアント側の問題なので、JavaScriptでの処理になります。
form要素のtarget属性を設定すれば別タブに開くことが出来ると思います。
【マウスでクリックされたボタンを取得する (JavaScript プログラミング)】
https://www.ipentec.com/document/javascript-get-mouse-down-button
【target属性 ≪ form要素 ≪ メタデータ ≪ 要素 ≪ HTML5入門】
http://html5.cyberlab.info/elements/forms/form-target.html
【新しいウィンドウ(またはタブ)で開いて前に出したい - Qiita】
https://qiita.com/weal/items/c906c67ae12789bb8968#form%E3%82%BF%E3%82%B0%E3%81%AEsubmit
投稿2019/08/21 01:43
総合スコア69407
ご教示いただきありがとうございます。
追加で質問させてください。
私が希望している処理というのはPythonで行うことは出来ず、JavaScriptで行う必要があるという解釈でよろしいでしょうか。
ご回答よろしくお願いいたします。
0
ベストアンサー
ミドルクリックはJavaScriptでmousedownをとった上で
「そのボタンがミドルクリックかどうか」を判定する必要があります。
mousedownだけだと右クリックも左クリックもとってしまうので。
タグの中にon～でイベントを直書きするよりもJavaScriptは外に出してイベント拾うようにした方がコードはスッキリすると思いますよ。
投稿2019/08/21 01:32
総合スコア80850
ご教示いただきありがとうございます。
追加で質問させてください。
私が希望している処理というのはPythonで行うことは出来ず、JavaScriptで行う必要があるという解釈でよろしいでしょうか。
ご回答よろしくお願いいたします。
クリックや画面遷移、ブラウザのタブなどはクライアントサイドのイベントなのでサーバーサイドの言語での話ではありません。
ご回答いただきありがとうございます。
JavaScriptを勉強したいと思います。
ありがとうございました。
Webをやっていくのであればほぼ必須ですので。
あなたの回答
tips
プレビュー
