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

Question

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

输入有一个 onblur 事件处理程序，（有时）导致 <button> 被移动；如果用户将焦点放在 <input> 上，然后单击 <button>（因此在单击完成之前它会从指针下方移动），他们当前必须将指针移动到按钮的新位置并再次单击它。这种体验是次优的。

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

我看不到任何基于处理 onmousedown and/or 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>

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

Answer 2

我有一个相关的问题，我正在设计按钮以在按下时缩小，使用 :active pseudo-class 调整 mouse-down 上的按钮大小并在按钮按下时重置其大小通过 :focus pseudo-class 获得关注。但是，如果单击按钮离其边缘足够近，它仍会被激活并缩小，但光标现在刚好在按钮的边界之外，按钮将不再获得焦点。

这是 click 事件本身运作的结果。要在给定的 element 上触发 onclick 事件，光标必须是 both pressed and released while the [cursor] is located inside the element。但是，如果光标在释放之前移动到元素之外，则会在包含这两个元素的 most specific ancestor element 上触发该事件。具体来说，这会导致 mousedown 事件在 element 上触发，mouseup 事件在其 ancestor element.

上触发

然后，一个解决方案是监视按钮的 mousedown 事件，如果它的 parent 的 mouseup 事件被触发（即光标被按下），则单击该按钮通过一个按钮但通过其 parent) 释放。

香草 JS 代码：

// The CSS selector for the buttons to monitor
const selectors = "button";

window.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll(selectors).forEach(button => {
        // Watch for button press
        button.addEventListener('mousedown', event => {
            // The button is the event's original target
            const element = event.target;
    
            // Click if the cursor is released over the button's parent
            element.parentElement.addEventListener('mouseup', () => {
                element.click();
            }, { once: true });
        });
    });
});

如果按钮的 parent 大小与按钮相同（例如 width: fit-content），则效果最佳。否则，如果光标在远离按钮的地方释放，但仍在按钮的 parent 元素上，则可能会发生意外点击。

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

How to handle "click" event even if element is moved from beneath the cursor between mousedown and mouseup?

html

javascript

jquery

jquery-events