javascript - 別のターゲットで Javascript イベントをトリガーする

Question

mousedownまたはtouchstartイベントが発生したときに子をそれ自体に追加する要素があります。この子はresizable(jQuery ui ウィジェット) です。私はhttp://touchpunch.furf.com/を使用して、タッチ デバイス用の jquery-ui ウィジェットを有効にします。

マウス/タッチを持ち上げて再度クリックすることなく、作成時に子のサイズを変更したい。マウスデバイスでは機能しますが、タッチデバイスを使用するとトリガーできません。

スニペットを確認してください (マウスでは機能しますが、タッチでは失敗します)。

1. Mousedown青色の要素 (赤色の要素が作成されます)
2. マウスを押したまま右にドラッグします (赤い要素のサイズが変更されます)

タッチデバイスで機能させることに失敗しました。で要素を作成しましたtouchstartが、指を離さないとサイズを変更できません。

私は基本的に、マウスと同じことをタッチで実現したいと考えています。event 問題は、サイズ変更ハンドルでトリガーする必要があるマストがどのように見えるかがわからないことです。

タッチイベントかどうかを確認して変更しようとしましたevent.targetが、うまくいきません。

if (event.type === "touchstart") {
  console.log("here i am stuck")
  event.target = handler[0];
  item.trigger(event);    
}

$(function(){
  $(document).on("mousedown touchstart", ".resizeCreator", function(event){
    if ($(this).find("div").length){
      return;
    }
    
    //Add resizable div
    $(this).append("<div>resize me</div>");
    $(this).find("div").resizable({handles: "e"});    
    simulateHandleEvent($(this).find("div"), event)
  });
  
  $(document).on("click", "button", function(){
    $(".resizeCreator").find("div").remove();
  });
})

var simulateHandleEvent = function(item, event){
  var handler = item.find(".ui-resizable-e").first();
  
  if (event.type === "touchstart") {
    console.log("here i am stuck")
    event.target = handler[0];
    item.trigger(event);    
  }else{
    handler.trigger("mouseover");
    handler.trigger({
    type: "mousedown",
    which: 1,
    pageX: handler.offset().left,
    pageY: handler.offset().top
  });    
  }
}

.resizeCreator{
  width:200px;
  height:200px;
  padding:5px;
  border:1xp solid black;
  background-color:blue;
}

.resizeCreator div{
  background-color:red;
  display:inline-block;
  padding:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>

<div class="resizeCreator">

</div>

<button>reset</button>