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>

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

0 个答案: