android 在原型 js 上检测 touchstart
android detect touchstart on prototype js
我正在尝试让 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)];
return 所有设备上的正确值数组(鼠标坐标),除了 android,我得到 NaN。这是 prototype.js 的已知错误吗?我可以绕过它吗?
谢谢,
通过挖掘事件对象解决问题,然后手动检索 X 和 Y pos(测试的 clientX、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)];
}
我遇到了同样的问题,我知道这是一个旧线程,但无论如何都想 post 我的解决方案。我需要覆盖 swiper.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);
},
这解决了我的问题
我正在尝试让 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)];
return 所有设备上的正确值数组(鼠标坐标),除了 android,我得到 NaN。这是 prototype.js 的已知错误吗?我可以绕过它吗?
谢谢,
通过挖掘事件对象解决问题,然后手动检索 X 和 Y pos(测试的 clientX、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)];
}
我遇到了同样的问题,我知道这是一个旧线程,但无论如何都想 post 我的解决方案。我需要覆盖 swiper.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);
},
这解决了我的问题