swiperight函数不能正常工作

我是jquery的新手。我按照这个link来学习滑动右键功能。我试图在我的项目中应用滑动右键功能。但是，当我向右滑动时，它没有任何反应。当我在此页面的任何位置向右滑动时，我想要触发向右滑动功能。我不知道哪部分出了问题。这是我的代码。swiperight函数不能正常工作

<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
    <title>Tinder-like Marketplace - Mobile Shop Template</title> 
    <meta charset="utf-8"> 
    <meta content="IE=edge" http-equiv="x-ua-compatible"> 
    <meta content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" name="viewport"> 
    <meta content="yes" name="apple-mobile-web-app-capable"> 
    <meta content="yes" name="apple-touch-fullscreen"> 

    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <link rel="stylesheet" type="text/css" href="css/responsive.css"> 
    <link rel="shortcut icon" href="images/favicon.png"> 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
    <script> 
$("body").on("swiperight",function(){ 
    alert("swipe right"); 
}); 
</script> 
</head> 

<body onload="initSwipe()"> 

<div id="main"> 

    <!-- MAIN PAGE --> 
    <div id="page"> 


     <!-- CONTENT CONTAINER --> 
     <div class="content-container"> 

      <!-- Product Header --> 
      <div class="content-header"> 

       <div class="product-title animated fadeIn" id="productName"> 

       </div><!-- Product title --> 

       <img src="images/240x240.png" alt="img" /> 

       <!-- Product meta --> 
       <div class="product-meta animated fadeInUp"> 
        <div class="product-title animated fadeIn">$</div> 
        <div class="product-title animated fadeIn" id="productPrice"> 

        </div> 
       </div>  
</div> 
     <div class="line"></div> 


     </div> 
     <!-- END CONTENT CONTAINER --> 


     <div id="swipeLike" class="main-bg"><i class="fa fa-plus"></i></div> 
     <div id="swipeUnlike" class="main-bg"><i class="fa fa-plus"></i> 
    </div> 

    </div> 


</div> 

<script type="text/javascript" src="js/jquery-3.1.1.js"></script> 
<script type="text/javascript" src="js/materialize.min.js"></script> 
<script type="text/javascript" src="js/slick.min.js"></script> 
<script type="text/javascript" src="js/jquery.slicknav.js"></script> 
<script type="text/javascript" src="js/jquery.swipebox.js"></script> 
<script type="text/javascript" src="js/custom.js"></script> 
<script type="text/javascript" src="js/swipe.js"></script> 


</body> 
</html>

来源

2017-08-04 phoon

尝试这样100％的工作：

定义swiperight和swipeleft或使用这样的：

$(document).on('swipeleft', 'body', function(event){ }); 
$(document).on('swiperight', 'body', function(event){ });

实施例：

$(document).on('swipeleft', 'body', function(event){  
 
    alert("swipeleft"); 
 
    return false;   
 
}); 
 

 
$(document).on('swiperight', 'body', function(event){  
 
    alert("swiperight"); 
 
    return false;     
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Swiperight Example</title> 
 
    <meta name="viewport" content="width=device-width,height=device-height,minimum-scale=1,maximum-scale=1"/> 
 
    <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
 
    <script src="//code.jquery.com/jquery-1.10.1.min.js"></script> 
 
    <script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> 
 
</head> 
 
<body> 
 
<p>Try to Swipe Right or Left</p> 
 
</body> 
 
</html>

来源

2017-08-04 04:44:46

swiperight函数不能正常工作

回答

相关问题