クリックとタブでフォーカスを処理する方法は？

Question

入力がクリックされたときにコンテンツを含むdivを非表示にする必要がありますが、入力がタブでフォーカスされているときはコンテンツが表示されます。現在、コンテンツを表示して非表示にすることはできますが、フォーカスをクリックしたときにフォーカスを処理できず、同時にフォーカスをクリックするとバウンスが発生します。

はここに私のコード

CodePen

$(function() { 
 
    $('.myinput').click(function(e) { 
 
    $('.text').addClass('hidden'); 
 
    console.log("click"); 
 
    }); 
 
    $('.myinput').focus(function() { 
 
    $('.text').removeClass('hidden'); 
 
    console.log("focus"); 
 
    }); 
 
});

.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <input class="myinput" type="text" /> 
 
    <div class="text"> 
 
    <div>TEXT TEXT TEXT</div> 
 
    <div>TEXT TEXT TEXT</div> 
 
    <div>TEXT TEXT TEXT</div> 
 
    </div> 
 
</div>

Answer 1

だ私は、マウスが押されているかどうかを判断するための変数を追加し、それがある場合にのみ、テキストの内容を非表示にします。マウスフォーカステキストが非表示になり、タブフォーカステキストが表示されます。

また、クリックハンドラをmousedownハンドラに変更しました。クリックイベントは、マウスの下にマウスを置いた後に起動して、ちらつきの問題を引き起こします。

codepen

var mousedown = false; 

$(function() { 
    $('.myinput').mousedown(function(e) { 
     mousedown = true; 
     $('.text').addClass('hidden'); 
     console.log("click"); 
    }); 
    $('.myinput').focus(function() { 
     if(!mousedown) $('.text').removeClass('hidden'); 
     console.log("focus"); 
    }); 
}); 

$(window).mouseup(function(e){ 
    mousedown = false; 
}) 

クローム