javascript - 如何处理 "click"事件，即使元素从 mousedown 和 mouseup 之间的光标下方移动？

Question

我有一个 <input>和一个 <button> .

输入有一个 onblur (有时)导致 <button> 的事件处理程序被移动；如果，关注 <input> , 用户去点击 <button> (因此在单击完成之前它会从指针下方移动)他们当前必须将指针移动到按钮的新位置并再次单击它。这种体验并不理想。

我希望用户必须单击 <button>只有一次(但必须保留当 <input> 失去焦点时按钮移动的功能)。但是，如果用户在按钮上按下鼠标，然后在按下鼠标之前将鼠标指针移开(包括从应用程序切换焦点)，则不应触发任何点击事件(正常情况下)。

我看不到任何基于处理 onmousedown 的方法和/或 onmouseup在某些边缘情况下不容易出错。我能想到的就是在onblur中强行移动光标。处理程序以便点击完成(如果确实如此？)——但这也可能是一种糟糕的用户体验。

如何最好地处理这个问题？

$('button').click(
  $('<li><input></li>')
    .children('input')
      .blur(function(){
        if (!this.value.length)
          this.parentElement.remove();
      })
      .end(),

  function(e){
    e.data.clone(true)
      .appendTo($(this).data('target'))
      .children('input')
        .focus();
  }
);

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
List 1<button data-target="#list1">+</button><ul id="list1"></ul>
List 2<button data-target="#list2">+</button><ul id="list2"></ul>

Answer 1

一种方法是让元素在一秒钟而不是立即淡出，这让用户有时间在按钮移动之前完成点击:

$(this.parentElement).fadeOut("slow", function() {
    $(this).remove();
});

实例:

$('button').click(
  $('<li><input></li>')
    .children('input')
      .blur(function(){
        if (!this.value.length)
          $(this.parentElement).fadeOut("slow", function() {
              $(this).remove();
          });
      })
      .end(),

  function(e){
    e.data.clone(true)
      .appendTo($(this).data('target'))
      .children('input')
        .focus();
  }
);

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
List 1<button data-target="#list1">+</button><ul id="list1"></ul>
List 2<button data-target="#list2">+</button><ul id="list2"></ul>

就是说，我想我会尝试找到一种方法，让列表元素之间的空间完全不变，因为这仍然意味着事情会四处移动，只是在不同的时间——希望 一次，用户不会被它打扰，但是......在这种情况下很棘手，因为列表彼此重叠 - 第二个列表将在某个时候移动。如果你让它总是有一个输入框供用户输入，那么第二个列表只会在不同的时间移动(当输入框确实有一个值并且你添加一个下一个值的新空白)。可以使用固定列表大小并在其中滚动来完成，但这取决于整体设计。