防止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是同步的，一次只能运行一件事。