Question

我有一个元素，当mousedown或touchstart事件发生时，会向自己添加一个子元素。这个孩子是resizable（jquery ui小部件）。我使用http://touchpunch.furf.com/为触摸设备启用jquery-ui小部件。

我希望在创建子项时调整其大小，而无需抬起鼠标/触摸并再次单击。它适用于鼠标设备，但在使用触摸设备时无法触发它。

检查代码段（适用于鼠标，触摸失败）

Mousedown un blue element（创建红色元素）
将鼠标向下拖动并向右拖动（红色元素调整大小）

我无法使其适用于触摸设备。我在touchstart上创建了元素，但是我无法通过抬起手指来调整它的大小。

我基本上想要通过触摸获得与鼠标相同的效果。问题是我不知道event必须看起来像我必须在调整大小句柄上触发

我检查是否是触摸事件并尝试更改event.target但这不起作用。

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

触发不同目标上的javascript事件

0 个答案: