如何使用javascript左右滑动加载的epub答案

【问题标题】：How to swipe loaded epub left and right using javascript如何使用javascript左右滑动加载的epub
【发布时间】：2021-05-09 16:27:30
【问题描述】：

大家好，我想将滑动应用到我加载的 epub。我使用javascript将epub加载到div中，我希望能够在div上向左滑动和向右滑动。

我有一个 jquery 脚本来执行此操作，但挑战在于，它不会在 div 上滑动，当我在页面上的其他控件（例如输入控件和选择）上向左或向右滑动鼠标时它会滑动控制。但是在带有 epub 的主 div 上，它不会滑动或不会调用滑动。

感谢您的帮助

编辑：在检查开发者工具端后，我注意到在区域 div 中加载 epub 后，它被加载到 iframe 中，我一直在尝试针对 iframe 进行 touchmove 事件，但尚未成功. 下面是开发者检查代码，谢谢。

   <div id="area" class="swipe-detector">
      <iframe id="epubjs-iframe:2dc3e713-d94a-4f98-a8d2-0ec974ed045b" 
       scrolling="no" height="100%" width="100%" style="border: none; 
       visibility: visible;">
       #document
       <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" 
        style="transform: translate(0px, 0px); overflow: hidden; width: auto; 
        height: 609px; column-fill: auto; column-width: 361px; column-gap: 
        44px;">
            <head>
               <base href="OEBPS/table-of-contents.html">
               <title>Table Of Contents -- The Problems of Philosophy</title>
               <meta http-equiv="Content-Type" 
                 content="application/xhtml+xml; charset=utf-8">
               <meta name="EPB-UUID" content="">

               <link rel="stylesheet" href="blob:null/64628d08-cd14-43f0- 
                93cf-4589c1eb1f9b" type="text/css">
            </head>
            <body style="margin: 0px;">
               ...
            </body>
       </html>
       </iframe>
    </div>

请在下面查看我的原始代码：

 <body class="swipe-detector">
   <div id="reader">
     <input type="file" id="bookChooser">
     <select id="toc"></select>
     <div id="area" class="swipe-detector"></div>
     <button id="prev" type="button"><</button>
     <button id="next" type="button">></button>
   </div>
 <script>
    (function($) {
     $.fn.swipeDetector = function(options) {
     // States: 0 - no swipe, 1 - swipe started, 2 - swipe released
     var swipeState = 0;
     // Coordinates when swipe started
     var startX = 0;
     var startY = 0;
     // Distance of swipe
     var pixelOffsetX = 0;
     var pixelOffsetY = 0;
     // Target element which should detect swipes.
     var swipeTarget = this;
     var defaultSettings = {
     // Amount of pixels, when swipe don't count.
     swipeThreshold: 70,
     // Flag that indicates that plugin should react only on touch events.
     // Not on mouse events too.
     useOnlyTouch: false
   };

   // Initializer
   (function init() {
     options = $.extend(defaultSettings, options);
     // Support touch and mouse as well.
     swipeTarget.on("mousedown touchstart", swipeStart);
     $("html").on("mouseup touchend", swipeEnd);
     $("html").on("mousemove touchmove", swiping);
   })();

   function swipeStart(event) {
     if (options.useOnlyTouch && !event.originalEvent.touches) return;
   
     if (event.originalEvent.touches) event = event.originalEvent.touches[0];

     if (swipeState === 0) {
       swipeState = 1;
       startX = event.clientX;
       startY = event.clientY;
     }
   }

   function swipeEnd(event) {
     if (swipeState === 2) {
      swipeState = 0;

     if (
       Math.abs(pixelOffsetX) > Math.abs(pixelOffsetY) &&
       Math.abs(pixelOffsetX) > options.swipeThreshold
      ) {
        // Horizontal Swipe
        if (pixelOffsetX < 0) {
          swipeTarget.trigger($.Event("swipeLeft.sd"));
          console.log("Left");
        } else {
          swipeTarget.trigger($.Event("swipeRight.sd"));
          console.log("Right");
        }
     } else if (Math.abs(pixelOffsetY) > options.swipeThreshold) {
       // Vertical swipe
       if (pixelOffsetY < 0) {
         swipeTarget.trigger($.Event("swipeUp.sd"));
         console.log("Up");
       } else {
         swipeTarget.trigger($.Event("swipeDown.sd"));
         console.log("Down");
       }
      }
     }
   }

   function swiping(event) {
     // If swipe don't occuring, do nothing.
     if (swipeState !== 1) return;

     if (event.originalEvent.touches) {
       event = event.originalEvent.touches[0];
     }

     var swipeOffsetX = event.clientX - startX;
     var swipeOffsetY = event.clientY - startY;

     if (
       Math.abs(swipeOffsetX) > options.swipeThreshold ||
       Math.abs(swipeOffsetY) > options.swipeThreshold
     ) {
       swipeState = 2;
       pixelOffsetX = swipeOffsetX;
       pixelOffsetY = swipeOffsetY;
     }
   }

   return swipeTarget; // Return element available for chaining.
  };
})(jQuery);

// Showcase
$("document").ready(function() {
  $(".swipe-detector")
    .swipeDetector()
    .on("swipeLeft.sd swipeRight.sd swipeUp.sd swipeDown.sd", function(event) {
    if (event.type === "swipeLeft") {
       console.log("Swipe Left");
    } else if (event.type === "swipeRight") {
      console.log("Swipe Right");
    } else if (event.type === "swipeUp") {
       console.log("Swipe Up");
    } else if (event.type === "swipeDown") {
       console.log("Swipe Down");
    }
   });
  });
 </script>
</body>

【问题讨论】：

标签： javascript html jquery swipe epub.js

【解决方案1】：

因此，技巧是在区域 div 上放置一个 div，然后在其上滑动以执行上一个和下一个动作。解决方案在这个链接： How to cover a div with another div as overlay

【讨论】：

请不要将链接发布到其他 SO 线程作为答案；将问题标记为可能的重复问题。