在Angular 7中与JQuery一起使用时,Touchend事件在ipad中不起作用

时间:2019-06-11 11:50:42

标签: javascript jquery touch mouseevent angular7

我正在使用两个列表之间的FieldLinker Js实现一个draw方法。此功能是根据jQuery中的鼠标事件编写的,并且在桌面浏览器中可以正常工作。 但是触摸事件并未在Ipad设备上触发。

我尝试按照stackoverflow map touch events to mouse answer中的以下链接将鼠标事件与鼠标事件映射,但是 Touchend 事件并未触发。

下面是我的代码:

 document.addEventListener("touchstart", this.touchHandler, true);
    document.addEventListener("touchmove", this.touchHandler, true);
    document.addEventListener("touchend", this.touchHandler, true);
    document.addEventListener("touchcancel", this.touchHandler, true);

    touchHandler(event) {
    var touches = event.changedTouches,
      first = touches[0],
      type = "";
    switch (event.type) {
      case "touchstart": type = "mousedown"; break;
      case "touchmove": type = "mousemove"; break;
      case "touchend": type = "mouseup"; break;
      case "touchcancel": type = "mouseup"; break;
      default: return;
    }

    // initMouseEvent(type, canBubble, cancelable, view, clickCount, 
    //                screenX, screenY, clientX, clientY, ctrlKey, 
    //                altKey, shiftKey, metaKey, button, relatedTarget);

    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1,
      first.screenX, first.screenY,
      first.clientX, first.clientY, false,
      false, false, false, 0/*left*/, null);

    first.target.dispatchEvent(simulatedEvent);
    // event.preventDefault();
  }

以及jQuery中的代码

 $(this).find(".FL-main .FL-right li").on("mouseup", function (e) {
                    if (isDisabled) return;
                    if (move == null) { // no drag 

                        eraseLinkB($(this).data("offset")); // we erase an existing link if any
                        draw();
                    } else {

                        // we finish a drag then get the infos an create a link
                        eraseLinkB($(this).data("offset")); // we erase an existing link if any
                        move.offsetB = $(this).data("offset");
                        move.nameB = $(this).data("name");
                        /* Added some logic to check the type of both fields and restrict mapping with other data type fields.*/
                        if (datalistValue[move.offsetA] != countries[move.offsetB]) {
                            Sa.fire('Cannot map ' + datalistValue[move.offsetA] + ' with ' + countries[move.offsetB]);
                            eraseLinkA(move.offsetA);
                            eraseLinkB(move.offsetB);
                        } else {
                            var infos = JSON.parse(JSON.stringify(move));
                            move = null;
                            makeLink(infos);
                            console.log('infos', infos);
                        }

                    }
                });

touchend事件未在更新的代码中触发。 请向我建议我要去哪里错了。预先感谢。

0 个答案:

没有答案