javascript - 实现 "less"时，触摸移动仅触发一次，就像在移动设备上滚动一样

Question

我正在尝试在 jQuery 终端的 less 扩展中实现触摸滚动。它的工作方式类似于 less unix 命令。

我有这个代码:

self.touch_scroll(function(event) {
    // how much difference changed since last touch move
    var delta = event.current.clientY - event.previous.clientY;
    var ret;
    var interpreter = interpreters.top();
    if (is_function(interpreter.touchscroll)) {
        ret = interpreter.touchscroll(event, delta, self);
    } else if (is_function(settings.touchscroll)) {
        ret = settings.touchscroll(event, delta, self);
    }
    if (ret === true) {
        return;
    }
    return false;
});
// make_callback_plugin is helper that use $.Callbacks and make sure that there is only
// one handler on the element
$.fn.touch_scroll = make_callback_plugin({
    name: 'touch',
    init: function(handler) {
        var origin;
        var previous;
        $(this).on('touchstart.scroll', function(e) {
            e = e.originalEvent;
            if (e.touches.length === 1) {
                previous = origin = e.touches[0];
            }
        }).on('touchmove.scroll', function(e) {
            e = e.originalEvent;
            console.log(!!origin + ' && ' + (e.touches.length) + ' === 1');
            if (origin && e.touches.length === 1) {
                var current = e.touches[0];
                var ret = handler({
                    origin: origin,
                    previous: previous,
                    current: current
                });
                if (ret === false) {
                    // this don't change anything
                    e.preventDefault();
                }
                previous = current;
            }
        }).on('touchend.scroll', function() {
            if (origin || previous) {
                origin = previous = null;
            }
        });
    },
    destroy: function() {
        $(this).off('touchstart.scroll touchmove.scroll touchend.scroll');
    }
});

里面少了我有:

    function scroll(delta, scroll_by) {
        if (delta > 0) {
            pos -= scroll_by;
            if (pos < 0) {
                pos = 0;
            }
        } else {
            pos += scroll_by;
            if (pos - 1 > lines.length - rows) {
                pos = lines.length - rows + 1;
            }
        }
        print();
        return true;
    }
    term.push($.noop, {
        onResize: refresh_view,
        touchscroll: function(event, delta) {
            console.log({delta});
            var offset = Math.abs(delta);
            // 14 is default height of single line in pixels
            scroll(delta, Math.ceil(offset / 14));
            return false;
        },
        mousewheel: function(event, delta) {
            return scroll(delta, scroll_by);
        }, 

我也有这个CSS:

.terminal-less {
    touch-action: none;
    overscroll-behavior-y: contain;
}

鼠标滚轮滚动效果很好，它以相同数量的scroll_by滚动，默认情况下为3(看起来大约是正确的)。 (pos 是行偏移量，因此如果我使用 pos++，它会移动/滚动一行，touchscroll 中的 delta 是正值或负值，范围约为 -20 到 20 像素。

我遇到的问题是，如何让它用手指滚动？感觉不对。而且只有当它不随手指移动时才会滚动。 touchmove 只触发一次，当我触摸手机时移动手指时它不应该触发吗？

有人有这种类型的触摸滚动行为的经验吗？

我正在寻找类似的问题，但没有找到解决方案。你知道为什么 touchmove 可以触发一次吗？我唯一能想到的是用作剪贴板的文本区域(在移动设备上它也用于启用虚拟键盘)，但我已将背景设置为红色，并且它在 Android 上不会移动。我正在测试此绘图演示中的其他代码:

https://zipso.net/a-simple-touchscreen-sketchpad-using-javascript-and-html5/

它工作正常，当您移动手指时，触摸移动会持续触发。

有什么想法吗？这将很难复制，但如果有人有兴趣进行调查，我可以将我的所有代码放在 jQuery Terminal 存储库中的 github 上(在某些分支中)。

奇怪的是 touchend 在 touchmove 之后不会触发，只有当我点击终端启用键盘时才会触发一次。

我尝试给 jQuery 打猴子补丁，并在每次触发时进行记录，但我没有任何其他事件(可能会阻止默认行为)，也根据文档，鼠标事件在 touchend 后触发，而那些事件则不触发。

Answer 1

你需要的是简单的.terminal-wrapper {pointer-events: none; } (基于devel 分支)。但使用此规则，您无法选择文本，这就是您只需将其用于移动设备的原因。

I'm not sure if this will block the selection of text on mobile, but if so, you can try to add this on touchstart (or even on touchmove as the first instruction) and remove it on touchend.

此外，我还必须添加一些 JS 代码，因为没有它，interpreter.touchScroll 就是未定义。但这不是问题的主要原因。

interpreters = new Stack($.extend({}, settings.extra, {
    name: settings.name,
    prompt: prompt,
    keypress: settings.keypress,
    keydown: settings.keydown,
    resize: settings.onResize,
    greetings: settings.greetings,
    mousewheel: settings.mousewheel,
    touchScroll: settings.touchScroll, // NEW LINE
    history: settings.history,
    keymap: new_keymap
}, interpreter));

self.touch_scroll(function(event) {
    var delta = event.current.clientY - event.previous.clientY;
    var ret;
    var interpreter = interpreters.top(); // NEW LINE
    if (is_function(interpreter.touchScroll)) {
        ret = interpreter.touchScroll(event, delta, self);
    } else if (is_function(settings.touchScroll)) {
        ret = settings.touchScroll(event, delta, self);
    }
    if (ret === true) {
        return;
    }
});

没有指针事件:无；

使用指针事件:无；