javascript - 防止 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 上也绑定(bind) mouseup，尽管这在我看来有点过分，但似乎可行。

问题是，如果您希望焦点返回到输入复选框，则需要使用 focusout 事件，如代码段中所示。另一种“保持”焦点在输入框上的范例行不通，因为 Javascript 是同步的，一次只能运行一件事。