javascript - 将短划视为点击

Question

我有一个移动网络应用程序，它在按钮等上使用了很多 click 事件处理程序。如果用户真的“点击”(即“touchdown-touchup”)，所有这些都可以正常工作按钮。但是，如果用户进行了短扫，则不会触发 click 事件。这引起了我的用户的大量提示，他们提示该应用程序没有记录点击/点击，而其他应用程序可以正常工作。

当然，我可以在 ontouchstart 和 ontouchend 中获取触摸坐标并计算距离 - 但我还需要知道该距离是否低于最大距离浏览器将视为“点击”。我不想切换到使用 touchstart/touchend 事件而不是点击。

我过去使用 fastclick.js 库来处理点击/点击，但现在使用带有 touch-action: manipulation 的原生“点击”事件。有没有什么方法可以指定/控制手指在仍然注册为“点击”的按钮上的最大移动？

更新 基于评论。该应用程序非常大，其中有数百甚至数千个事件处理程序分配(该应用程序已在过去 8 年中开发)。更改所有这些是不切实际的，因此我正在寻找一种解决方案，它可以让我在全局范围内设置一次阈值，或者使用类似全局的 touchstart/touchend 处理程序来解决问题。

Answer 1

我认为这是一个有趣的问题，所以我尝试为您解决它。在某种程度上，它有点类似于在 dblclick 发生时阻止 click 事件的问题。

至少对我来说，为“短扫”使用距离阈值似乎是有问题的，因为阈值距离可能取决于系统。相反，我决定在“点击”事件实际发生时触发。我使用 mousedown 作为模拟的 touchstart 和 mouseup 作为模拟的 touchend。 mouseup 总是发生在 click 之前，所以它在这方面类似于 touchend。

通常，如果您“单击”(mousedown) 一个元素，然后将鼠标指针移离该元素，则不会发生 click 事件。这很像您描述为“短扫”的情况。一定距离后，click 事件就不会发生。下面的代码将为按钮发送一个 click 事件，即使您在按钮上按下 mousedown，将指针移开，然后 mouseup。我相信，如果您将它用于 touchstart 和 touchend，这会解决问题

// The pre-exisiting click handler
function handleClick(ev) {
    console.log('button clicked. do work.');
}

document.getElementById('theButton').addEventListener('click', handleClick);

// our global "touch" handlers
var touchHandler = {
    curPending: null,
    curElem: null,

    handleTouch: function handleTouch(ev) {
        switch (ev.type) {
            case 'mousedown':
                // capture the target that the click is being initiated on
                touchHandler.curElem = ev.target;
                
                // add an extra click handler so we know if the click event happens
                ev.target.addEventListener('click', touchHandler.specialClick);
                break;

            case 'mouseup':
                // start a pending click timer in case the click event doesn't happen
                touchHandler.curPending = setTimeout(touchHandler.pendingClick, 1);
                break;
        }
    },

    specialClick: function(ev) {
        // the click event happened 
        // clear our extra handler 
        touchHandler.curElem.removeEventListener('click', touchHandler.specialClick);
        
        // make sure we don't send an extra click event
        clearTimeout(touchHandler.curPending);
    },

    pendingClick: function() {
        // we never heard the click event
        
        // clear our extra handler 
        touchHandler.curElem.removeEventListener('click', touchHandler.specialClick);

        // trigger a click event on the element that started it all
        touchHandler.curElem.click();
    }
};

// using "mousedown" as "touchstart" and "mouseup" as "touchend"
document.addEventListener('mouseup', touchHandler.handleTouch);
document.addEventListener('mousedown', touchHandler.handleTouch);

<p>I work when clicked normally but I also work when 
mousedown, drag pointer off me, mouseup</p>
<button id="theButton">Click Me</button>