Событие Touchend не работает в ipad при использовании с JQuery в Angular 7 - PullRequest
Новая
       21

Событие Touchend не работает в ipad при использовании с JQuery в Angular 7

0 голосов
/ 11 июня 2019

Я реализую метод рисования, используя FieldLinker Js между двумя списками. Эта функциональность написана на основе событий мыши в jQuery и отлично работает в настольных браузерах. Но сенсорные события не срабатывали в устройстве Ipad.

Я попытался сопоставить события касания с событиями мыши согласно приведенной ниже ссылке в stackoverflow сопоставить события касания с ответом мыши , но, тем не менее, событие 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 не запускается в обновленном коде. Пожалуйста, предложите мне, где я иду не так. Заранее спасибо.

...