Android 检测 TouchStart 在原型 JS 上

android detect touchstart on prototype js

本文关键字：JS 原型 检测 TouchStart Android      更新时间：2023-09-26

我正在尝试使Magento扩展在Android移动设备上工作。我买了这个扩展：

http://ecommerce.aheadworks.com/magento-extensions/layered-navigation.html

获取 Ajax 分层导航。它运行良好，但是当涉及到android兼容性时，我在范围选择器（滑块选择器，用于价格范围）上遇到了问题。

该功能在所有设备（包括ios）上运行良好，但在Android上，我总是在范围选择器上获得NaN而不是数字值。挖掘插件的代码后，我在javascript中找到了起源：

startDrag: function(event) {
    var isLeftClick = Event.isLeftClick(event);
    if (Prototype.Browser.IE) {
        var ieVersion = parseInt(navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")+5));
        if (ieVersion > 8) {
            isLeftClick = event.which === 1;
        }
    }
    if (isLeftClick || event.type === 'touchstart') {
        if (!this.disabled){
            this.active = true;
            var handle = Event.element(event);
            var pointer  = [Event.pointerX(event), Event.pointerY(event)];
            var track = handle;
            if (track==this.track) {
                var offsets  = Position.cumulativeOffset(this.track);
                this.event = event;
                this.setValue(this.translateToValue(
                    (this.isVertical() ? pointer[1]-offsets[1] : pointer[0]-offsets[0])-(this.handleLength/2)
                ));
                var offsets  = Position.cumulativeOffset(this.activeHandle);
                this.offsetX = (pointer[0] - offsets[0]);
                this.offsetY = (pointer[1] - offsets[1]);
            } else {
                // find the handle (prevents issues with Safari)
                while((this.handles.indexOf(handle) == -1) && handle.parentNode)
                    handle = handle.parentNode;
                if (this.handles.indexOf(handle)!=-1) {
                    this.activeHandle    = handle;
                    this.activeHandleIdx = this.handles.indexOf(this.activeHandle);
                    this.updateStyles();
                    var offsets  = Position.cumulativeOffset(this.activeHandle);
                    this.offsetX = (pointer[0] - offsets[0]);
                    this.offsetY = (pointer[1] - offsets[1]);
                }
            }
        }
        Event.stop(event);
    }
}

这一行：

var pointer  = [Event.pointerX(event), Event.pointerY(event)];

在所有设备上返回正确的值数组（鼠标坐标），除了在 Android 上，我在那里得到 NaN。这是原型.js的已知错误吗，我可以绕过它吗？

谢谢

通过挖掘事件对象，然后手动检索 X 和 Y pos（测试的客户端 X、screenX 和 pageX）解决了问题：

var pointer  = [Event.pointerX(event), Event.pointerY(event)];
            if(navigator.userAgent.match(/Android/i)){
                pointer  = [parseInt(event.targetTouches[0].clientX),parseInt(event.targetTouches[0].clientY)];
            }

我遇到了同样的问题，我知道这是一个旧线程，但无论如何都想发布我的解决方案。我需要覆盖刷卡.js中的功能。

    update: function(event) {
    if (this.active) {
      if (!this.dragging) this.dragging = true;
      this.draw(event);
      if (Prototype.Browser.WebKit) window.scrollBy(0,0);
      Event.stop(event);
    }
},
draw: function(event) {
    var pointer = [Event.pointerX(event), Event.pointerY(event)];
    if(navigator.userAgent.match(/Android/i)){
        pointer = [parseInt(event.targetTouches[0].clientX),parseInt(event.targetTouches[0].clientY)];
    }
    var offsets = Position.cumulativeOffset(this.track);
    pointer[0] -= this.offsetX + offsets[0];
    pointer[1] -= this.offsetY + offsets[1];
    this.event = event;
    this.setValue(this.translateToValue( this.isVertical() ? pointer[1] : pointer[0] ));
    if (this.initialized && this.options.onSlide)
      this.options.onSlide(this.values.length>1 ? this.values : this.value, this);
},

这解决了我的问题

相关文章：