如何让触摸事件在 windows 表面的 chromium portable 运行 中工作?
How to get touch events working in chromium portable running in windows surface?
这就是我用来触发触摸事件的方法:
var eventMap = {};
(function(){
var eventReplacement = {
"mousedown": ["touchstart mousedown", "mousedown" , "pointerdown"],
"mouseup": ["touchend mouseup", "mouseup", "pointerup"],
"click": ["touchstart click", "click"],
"mousemove": ["touchmove mousemove", "mousemove", "pointermove"]
};
for (i in eventReplacement) {
if (typeof window["on" + eventReplacement[i][0]] == "object") {
eventMap[i] = eventReplacement[i][0];
}
else {
eventMap[i] = eventReplacement[i][1];
};
};
})();
然后我使用它如下:
$(genderSlider.pointer).on(eventMap.mousedown, setOffset);
$(genderSlider.pointer).on(eventMap.mousemove, fnMoveSlider);
$(genderSlider.pointer).on(eventMap.mouseup, function(event){event.preventDefault(); $(event.target).css("-webkit-opacity", "0.5");usingSlider = false});
然后回调方法看起来有点像这样:
function setOffset(event){
alert(event.type);
event.preventDefault();
alert(event.type);
var touch = '';
if (event.type == 'mousedown'){
usingSlider = true;
touch = event;
} else {
usingSlider = true;
alert(event.type);
touch = event.originalEvent.touches[0];
}
var ypos = touch.pageY; // Get Y Coordinate
$(event.target).css("-webkit-opacity", "1.0");
offset = parseFloat(ypos) - parseFloat(this.style.top);
refObj = {};
if(this.id === $(genderSlider.pointer).attr("id")){
refObj = genderSlider;
}
}
鼠标事件一切正常。但对于触摸事件,警报显示为鼠标事件。也尝试了 touch-action: none
。但不起作用
任何人都可以建议我应该尝试什么吗?
我终于成功了。可能对以后的读者有用。
该解决方案实际上比我实际认为的要容易得多。虽然没有多大意义,但它确实有效。
解决方案如下:
分别写了两种事件的方法,所以看起来像:
$(genderSlider.pointer).on("mousedown", setOffset);
$(genderSlider.pointer).on("mousemove", fnMoveSlider);
$(genderSlider.pointer).on("mouseup", function(event) {event.preventDefault(); $(event.target).css("-webkit-opacity", "0.5");usingSlider = false});
再次触摸:
$(genderSlider.pointer).on("touchstart", setOffsetForTouch);
$(genderSlider.pointer).on("touchmove", fnMoveSliderForTouch);
$(genderSlider.pointer).on("touchend", function(event) {event.preventDefault(); $(event.target).css("-webkit-opacity", "0.5");usingSlider = false});
然后分别写回调事件,区别对待。
这就是我用来触发触摸事件的方法:
var eventMap = {};
(function(){
var eventReplacement = {
"mousedown": ["touchstart mousedown", "mousedown" , "pointerdown"],
"mouseup": ["touchend mouseup", "mouseup", "pointerup"],
"click": ["touchstart click", "click"],
"mousemove": ["touchmove mousemove", "mousemove", "pointermove"]
};
for (i in eventReplacement) {
if (typeof window["on" + eventReplacement[i][0]] == "object") {
eventMap[i] = eventReplacement[i][0];
}
else {
eventMap[i] = eventReplacement[i][1];
};
};
})();
然后我使用它如下:
$(genderSlider.pointer).on(eventMap.mousedown, setOffset);
$(genderSlider.pointer).on(eventMap.mousemove, fnMoveSlider);
$(genderSlider.pointer).on(eventMap.mouseup, function(event){event.preventDefault(); $(event.target).css("-webkit-opacity", "0.5");usingSlider = false});
然后回调方法看起来有点像这样:
function setOffset(event){
alert(event.type);
event.preventDefault();
alert(event.type);
var touch = '';
if (event.type == 'mousedown'){
usingSlider = true;
touch = event;
} else {
usingSlider = true;
alert(event.type);
touch = event.originalEvent.touches[0];
}
var ypos = touch.pageY; // Get Y Coordinate
$(event.target).css("-webkit-opacity", "1.0");
offset = parseFloat(ypos) - parseFloat(this.style.top);
refObj = {};
if(this.id === $(genderSlider.pointer).attr("id")){
refObj = genderSlider;
}
}
鼠标事件一切正常。但对于触摸事件,警报显示为鼠标事件。也尝试了 touch-action: none
。但不起作用
任何人都可以建议我应该尝试什么吗?
我终于成功了。可能对以后的读者有用。
该解决方案实际上比我实际认为的要容易得多。虽然没有多大意义,但它确实有效。
解决方案如下:
分别写了两种事件的方法,所以看起来像:
$(genderSlider.pointer).on("mousedown", setOffset);
$(genderSlider.pointer).on("mousemove", fnMoveSlider);
$(genderSlider.pointer).on("mouseup", function(event) {event.preventDefault(); $(event.target).css("-webkit-opacity", "0.5");usingSlider = false});
再次触摸:
$(genderSlider.pointer).on("touchstart", setOffsetForTouch);
$(genderSlider.pointer).on("touchmove", fnMoveSliderForTouch);
$(genderSlider.pointer).on("touchend", function(event) {event.preventDefault(); $(event.target).css("-webkit-opacity", "0.5");usingSlider = false});
然后分别写回调事件,区别对待。