jquery触摸在iframe上滑动

我正在尝试整理一个小应用程序，我可以在屏幕上的任何位置滑动。

在我想要将iframe添加到页面的某个部分之前，这一切都还可以。 我希望能够知道当人们在这个区域时滑动发生的时间。 这可能吗？

所以#box是可滑动区域的想法

 
 
 
 this is some text
 
 
   

我已经整理了一个基本的jsfiddle，可能有助于表明我的意思

http://jsfiddle.net/dwhitmarsh/v42S9/

Answer 1

我个人会用div来覆盖iframe 。

 var maxTime = 1000, // allow movement if < 1000 ms (1 sec) maxDistance = 50, // swipe movement of 50 pixels triggers the swipe target = $('#box'), startX = 0, startTime = 0, touch = "ontouchend" in document, startEvent = (touch) ? 'touchstart' : 'mousedown', moveEvent = (touch) ? 'touchmove' : 'mousemove', endEvent = (touch) ? 'touchend' : 'mouseup'; target.bind(startEvent, function(e) { // prevent image drag (Firefox) // e.preventDefault(); startTime = e.timeStamp; startX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX; }).bind(endEvent, function(e) { startTime = 0; startX = 0; }).bind(moveEvent, function(e) { // e.preventDefault(); var currentX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX, currentDistance = (startX === 0) ? 0 : Math.abs(currentX - startX), // allow if movement < 1 sec currentTime = e.timeStamp; if (startTime !== 0 && currentTime - startTime < maxTime && currentDistance > maxDistance) { if (currentX < startX) { // swipe left code here target.find('h1').html('Swipe Left').fadeIn(); setTimeout(function() { target.find('h1').fadeOut(); }, 1000); } if (currentX > startX) { // swipe right code here target.find('h1').html('Swipe Right').fadeIn(); setTimeout(function() { target.find('h1').fadeOut(); }, 1000); } startTime = 0; startX = 0; } }); 

 h1 { text-align: center; font-size: 24px; } #box { width: 800px; height: 600px; margin: 30px auto; background-color:#eee; } #left{ position:relative; float:left; width:40%; } #right{ position:relative; float:left; width:40%; } #right .iframe_cover{ position: absolute; width: 100%; height: 40%; top: 0; left: 0; } 

  
Swipe Inside the Box
 
 
 
 
 this is some text