Question

我正在尝试在用户与iframe交互时调用触摸移动事件。

此代码位于包含iframe的顶级页面。

var myIframe = document.getElementById('iFrame');
var myIframeDoc = myIframe.contentWindow.document;
myIframeDoc.addEventListener('touchmove', function(event){

    console.log('iframe touched');

    var e = document.createEvent('TouchEvent');
    //e.touches = [{pageX: 10, pageY: 10}];
    //e.initTouchEvent('touchstart', true, true);
    e.initUIEvent('touchstart', true, true);

}, false);

因此，当用户触摸在iframe上移动时，它将调用下面的一个事件（也在顶层页面）。

document.addEventListener("touchmove", function(event){

    alert('touchmove');

});

document.addEventListener("touchstart", function(event){

    alert('touchstart');

});

document.addEventListener("touchend", function(event){

    alert('touchend');

});

然而，触摸事件不会在父图层上触发......但是控制台日志工作正常，因此它正在拾取iframe touchmove，但TouchEvent部分似乎无法正常工作。

简而言之，我需要能够触发事件，就好像用户在与iframe交互时触摸了父页面一样。

Answer 1

您没有派遣此活动。我还必须将其创建为MouseEvent。

＆＃13;

document.addEventListener("touchstart", function (event) {
    alert('touchstart');
});
// Fix 1 (test in mobile, it may need to be feature detected)
// Or not work reliably across browsers, some clients will need TouchEvent
var e = document.createEvent('MouseEvent');
e.initUIEvent('touchstart', true, true);
//Fix 2
document.dispatchEvent(e);

＆＃13;

从iframe调用父级的触摸事件

1 个答案: