禁用预测滚动鼠标轮(OnScroll)事件太频繁(Touchpad)

Question

我正在执行Javascript onScroll。我的代码适用于任何普通的计算机鼠标，但当我使用笔记本的触摸屏时，我会遇到以下情况：

• 当手指移动方向盘时，我的鼠标触发(大约1到8) mousewheel事件。
• 我的触控板触发了更多的(~60) mousewheel事件，当两个手指接触到时，在我的手指又飞起来后继续开火。

我从移动触摸设备中知道这种行为。这个功能叫做“预测触觉”--如果你的手指在提升之前有足够的加速度，滚动就会继续。

我认为触屏驱动程序正在设置这种“平滑滚动”行为。

为了调试这种情况，我使用了以下代码：

/* Handle Mouse-Wheel Scrolling */
var lastChange = +new Date();
$(window).bind('mousewheel',    function(e){
    console.log("mw");
    if(+new Date() - lastChange > 1000){
        console.log("mw allowed");
        if(e.originalEvent.wheelDelta > 0)  {/*go to previous*/}
        else{   /*go to next*/}
        lastChange = +new Date();
    }
return false;});

这是一个简单的代码，它“允许”每秒钟发生鼠标滚动事件。

如果我做了一个快速的触摸屏滚动，mousewheel事件将被触发300次.一秒的条件是让三个事件发生。我的手指在触控板上的时间还不到一秒钟。

通过这个测试，我发现mousewheel事件仍然被触发(几乎连续3秒)，即使我的手指已经脱离了触控板。

是否有Javascript函数或解决方案/技巧/黑客来避免这种行为？

onTouchEnd 类似于触摸屏的事件，也许？

Answer 1

要实现这一点，您必须区分鼠标滚动事件和触摸屏事件，使用JavaScript还不可能做到这一点。它已经被问到了如何捕捉触控板输入的问题。

指针事件目前处于编辑器草稿的状态，任何浏览器都不支持它。另见触摸MDN上的事件文档。

Answer 2

编辑:这似乎不适用于履带。一旦它们被广泛支持，就可以使用触摸事件，特别是触端事件来实现它们。通过跟踪手指何时离开触控板，可以防止页面在该特定点滚动。

https://jsfiddle.net/gLkkb5z0/3/

(function(){

    var special = jQuery.event.special,
        uid1 = 'D' + (+new Date()),
        uid2 = 'D' + (+new Date() + 1);

    special.scrollstart = {
        setup: function() {

            var timer,
                handler =  function(evt) {

                    var _self = this,
                        _args = arguments;

                    if (timer) {
                        clearTimeout(timer);
                    } else {
                        evt.type = 'scrollstart';
                        jQuery.event.handle.apply(_self, _args);
                    }

                    timer = setTimeout( function(){
                        timer = null;
                    }, special.scrollstop.latency);

                };

            jQuery(this).bind('scroll', handler).data(uid1, handler);

        },
        teardown: function(){
            jQuery(this).unbind( 'scroll', jQuery(this).data(uid1) );
        }
    };

    special.scrollstop = {
        latency: 300,
        setup: function() {

            var timer,
                    handler = function(evt) {

                    var _self = this,
                        _args = arguments;

                    if (timer) {
                        clearTimeout(timer);
                    }

                    timer = setTimeout( function(){

                        timer = null;
                        evt.type = 'scrollstop';
                        jQuery.event.handle.apply(_self, _args);

                    }, special.scrollstop.latency);

                };

            jQuery(this).bind('scroll', handler).data(uid2, handler);

        },
        teardown: function() {
            jQuery(this).unbind( 'scroll', jQuery(this).data(uid2) );
        }
    };

})();

演示

取自http://james.padolsey.com/javascript/special-scroll-events-for-jquery/