Question

我已经进行了相当广泛的搜索，所以请原谅我，如果这已被其他地方所覆盖。考虑这个小程序，它演示了我试图解决的问题。我想在单击textarea框到可排序列表时触发.focusout（）事件。它几乎触发了textarea以外的所有地方，但列表。有什么想法吗？

    <!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的奇怪行为......无法解释。

但是，如果你对一个遍历感兴趣，你可以在可排序的元素上触发mousedown上的.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焦点不起作用

2 个答案: