Q&A
ありがとうございます。
はい、それぞれ別の要素でイベントが働いていることは承知しております。
$('.kana').text('');をクリックイベントに入れられたら楽なのですが、フォーカスが外れた際に消しておきたかったのでご質問させていただきました。
タイトルの通り、「click」と「blur」イベントが同時に発生した時、blurが優先的に呼び出されますが、「click」の処理を先に行いたいです。
以下は処理の確認サンプルです。
HTML
1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<meta name="robots" content="noindex, nofollow"> 6<title>サンプル</title> 7 8<style> 9.kana{ 10 background-color:#ccc; 11 cursor:pointer; 12} 13</style> 14 15</head> 16<body> 17 18<input type="text" id="kanahenkan" /><br> 19<span class="kana"></span> 20 21<script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> 22<script> 23$(function(){ 24 25 //入力したらカタカナ候補を出す 26 $('#kanahenkan').on('input', function(evnt){ 27 $('.kana').text($(this).val().toKatakanaCase()); 28 }); 29 30 //クリックしたらカタカナを代入 31 $('.kana').on('click', function(){ 32 $('#kanahenkan').val($(this).text()); 33 }); 34 35 //フォーカスが外れたらカタカナを消す 36 $('#kanahenkan').on('blur', function(){ 37 $('.kana').text(''); 38 }); 39 40 // kanaXs 41 // https://github.com/shogo4405/KanaXS.git 42 String.prototype.toKatakanaCase=function(){for(var a,b=this.length,c=[];b--;)a=this.charCodeAt(b),c[b]=12353<=a&&12438>=a?a+96:a;return String.fromCharCode.apply(null,c)};String.prototype.toHankakuCase=function(){for(var a,b=this.length,c=[];b--;)switch(a=c[b]=this.charCodeAt(b),!0){case 65281<=a&&65374>=a:c[b]-=65248;break;case 12288==a:c[b]=32}return String.fromCharCode.apply(null,c)}; 43 44}); 45</script> 46</body> 47</html>
フォームに入力したヒラガナのカタカナ候補を下に表示させ、クリックしたらそのカタカナがフォームに代入されるといったサンプルです。
（実際に書いているコードとは異なりますが、やりたいことは同じです）
このhtmlをコピペした頂くと分かりやすいのですが、実際にカタカナをクリックすると、代入の前にblurの処理が先に走ってしまい、代入することができません。
対応策として、
HTML
1$('#kanahenkan').on('blur', function(){ 2 setTimeout(function(){ 3 $('.kana').text(''); 4 }, 200); 5});
と、処理を遅らせることで何とか理想の動きが出来ましたが、非常に気持ち悪く、どの環境でも実行できるか怪しいので、できればこういった書き方は使いたくないです。（100では無理でした）
こういったケースで、clickイベントを先に行うにはどのようにすべきでしょうか？
どなたかご教示お願いいたします。
回答2件
0
ベストアンサー
clickではなく、mousedownではだめですか？
$('.kana').on('mousedown', function(){ $('#kanahenkan').val($(this).text()); });
投稿2017/01/17 02:42
総合スコア726
0
「click」と「blur」イベントが同時に発生した時
とございますが、実際には同時ではありません。
clickは$('.kana')に対して、
blurは$('#kanahenkan')に対して、
それぞれハンドリングされていますので、$('.kana')をクリックすると$('#kanahenkan')からフォーカスが外れ、blurイベントが発火します。
とどのつまり、$('.kana')をクリックしなかった場合でも、$('#kanahenkan')からフォーカスが外れるとblurが発火します。
（ご理解されているかと存じますが念のため）
投稿2017/01/17 02:42
総合スコア429
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/01/17 03:59