通过将点击事件委托给坐标点击覆盖 div 到画布

Question

我有一个没有内置缩放和平移解决方案的画布应用程序。

我的解决方法是在画布上覆盖 pointer-events:all 和 opacity: 0，这样你就可以缩放和平移。

我现在的问题是将点击从叠加层委托给画布。 现在我的想法是获取触摸点击的坐标并使用指针事件再次模拟此点击：无但它不起作用..

$(document).on('touchstart', function (event) {
  showCoordinates(event);
});

function showCoordinates(event) {
  var x = event.touches[0].clientX;
  var y = event.touches[0].clientY;
  console.log(x);
  console.log(y);
  $('#overlay').css('pointer-events','none');
  var myEvent = $.Event( "touchstart", { pageX:x, pageY:y } );
  $("body").trigger( myEvent );
  $('#overlay').css('pointer-events','all');
}

我的主要问题是我模拟点击这里的部分

var myEvent = $.Event( "touchstart", { pageX:x, pageY:y } );
$("body").trigger( myEvent );

它甚至在谷歌浏览器控制台中不起作用。 我在这里做错了什么？

Answer 1

第一个问题是您创建的事件没有在showCoordinates函数中使用的event.touches[0].clientX和event.touches[0].clientY道具。 改变

var myEvent = $.Event( "touchstart", { pageX:x, pageY:y } );

到

var myEvent = $.Event( "touchstart", { touches: [{clientX: x, clientY: y}] } );

. 在最后一行中，为x和y 。 您很可能会遇到新问题，例如无限递归。 提供一些 HTML 代码，以便您更好地提供帮助。 我想，有一个更简单的解决方案。