防止mousedown竊取當前輸入的焦點，但允許選擇文本

Question

是否可以防止div中的鼠標向下移動來竊取焦點，但允許在此容器中選擇文本（例如<div> ）？

 /*// Version #1: Focus kept, but text is not selectable $('div').on('mousedown', function(event) { event.preventDefault(); }); /**/ // Version #2: Focus kept, text selectable, but focus is missing for a short time (flickering when css is applied to focused state) $('div').on('mousedown', function(event) { window.setTimeout( function() { $('input').focus(); }, 1 ); }); /**/ $('input').focus(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" /> <div>A div container with some text, that should be selectable but not stealing focus of the input field</div> 

當我單擊文本（在當前的Chrome中測試）時，第二個版本閃爍。 在Firefox中，選擇始終從輸入字段開始。 有更好的解決方案嗎？

Answer 1

答案就在您的眼前:)

 /*// Version #1: Focus kept, but text is not selectable $('div').on('mousedown', function(event) { event.preventDefault(); }); /**/ // Version #2: Focus kept, text selectable, but focus is missing for a short time (flickering when css is applied to focused state) $('input').on('focusout', function(event) { //setTimeout(function(){$('input').focus()}, 1); }); /**/ //$('div').on('mouseup', function(event) { // $('input').focus(); //}); $('html').on('mouseup', function(event) { $('input').focus(); }); $('input').focus(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" /> <div>A div container with some text, that should be selectable but not stealing focus of the input field</div> 

如果您的mouseup發生在此div之外，則焦點丟失將繼續存在。

另一種方法是即使在html上也綁定mouseup ，盡管這聽起來有點過分IMO，但似乎可以工作。

問題是，如果您希望焦點返回到輸入復選框，則需要使用代碼片段中所示的focusout事件。 “保持”專注於輸入框的另一種范例不起作用，因為Javascript是同步的，一次只能運行一件事。