单击可排序列表时，textarea focusout 不起作用

Question

我已经进行了相当广泛的搜索，所以请原谅我是否已在其他地方进行过介绍。考虑这个小程序，它演示了我要解决的问题。我希望 .focusout() 事件在单击文本框外的可排序列表时触发。除了列表之外，它几乎在文本区域之外的任何地方都会触发。有什么想法吗？

    <!DOCTYPE HTML>
    <html>
    <head>
    <style>
    textarea {
      width:90px;
      height:90px;
    }

    #la {
      width:90px;
      height:90px;
      border:1px solid black;
    }

    ul {
      margin:0;
      list-style-type: none;
    }

    li {
      border:1px solid black;
    }
    </style>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
    $( document ).ready(function() {
      $("#la ul").sortable();
    });

    $( document ).ready(function() {
      $("#ta").focusout(function(){
        alert("out");
      });
    });

    </script>
    </head>

    <body>
    <div id="la">
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>  
    </div><br>
    <div id="cont">
    <textarea id="ta">123456</textarea>
    </div>
    </body></html>

Answer 1

那是 jQuery-ui 的奇怪行为...无法解释。

但是，如果您对漫游感兴趣，可以在可排序元素上按下鼠标时触发 .blur()。

$(".ui-sortable-handle").on("mousedown", function(){
  if( $("#ta").is(":focus") ){ 
    $("#ta").blur();
  }
});

见here。

而且，顺便说一句，只需一个现成的包装器就足以围绕您的函数。

Answer 2

谢谢路易斯！这行得通。按照您的逻辑，我还可以在可排序块中添加一行：

    start: function() {if ($("#ta").is(":focus")) $("#ta").blur();}

...尽管这仅在执行实际排序时有效。

单击可排序列表时，textarea focusout 不起作用

textarea focusout not working when clicking into sortable list

jquery

textarea

jquery-ui-sortable

focusout