javascript - 如何让触摸事件在 Windows 表面上运行的铬便携式设备中工作？

Question

这就是我用来触发触摸事件的方法：

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了。但不起作用

有人可以建议我应该尝试什么吗？

Answer 1

我终于让它工作了。可能对未来的读者有用。

这个解决方案实际上比我想象的要容易得多。虽然没有多大意义，但它确实有效。

解决方案如下：

分别为两种类型的事件编写了方法，所以它看起来像：

$(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});

然后分别编写回调事件以不同方式处理案例。