Question

这是我第一次在移动设备上实施应用程序。我正在使用javascript和html创建应用程序。

我想实施swipeRight and swipeLeft个事件。为此，我对所有人建议使用jquery或hammer进行了嘲笑。

我试过两个插件，但两个插件都失败了。

使用Jquery（不工作）：

第1步：复制粘贴的代码形式this链接并保存文件，并在html页面的末尾提及。

第2步：运行以下代码

  $('#eleId').on('swiperight',function(){alert("swipeRight");})

使用Hammer（不工作）：

第1步：复制粘贴的代码形式this链接并保存文件，并在html页面的末尾提及。

第2步：按照文档

运行以下代码

  $('#eleId').on('swipe',function(){alert("swipeRight");})

在这种情况下，它会抛出异常，而页面加载时间本身。

例外：

Uncaught ReferenceError: Hammer is not defined

我怎样才能达到我的要求。任何人都可以帮助我。

谢谢和问候。

Answer 1

在Jquery中语法是

 $("selector").on("swipeleft",function(event){...})

结帐w3schools - 但您的代码看起来不错

你为什么需要hammer.js？

查看this link并在javascript中自行构建滑动事件。

（以防链接在这里删除＆＃39;代码）

<script>



 window.addEventListener('load', function(){

   var touchsurface = document.getElementById('touchsurface'),
  startX,
  startY,
  dist,
  threshold = 150, //required min distance traveled to be considered swipe
  allowedTime = 200, // maximum time allowed to travel that distance
  elapsedTime,
  startTime

 function handleswipe(isrightswipe){
  if (isrightswipe)
   touchsurface.innerHTML = 'Congrats, you\'ve made a <span style="color:red">right swipe!</span>'
  else{
   touchsurface.innerHTML = 'Condition for right swipe not met yet'
  }
 }

 touchsurface.addEventListener('touchstart', function(e){
  touchsurface.innerHTML = ''
  var touchobj = e.changedTouches[0]
  dist = 0
  startX = touchobj.pageX
  startY = touchobj.pageY
  startTime = new Date().getTime() // record time when finger first makes contact with surface
  e.preventDefault()

 }, false)

 touchsurface.addEventListener('touchmove', function(e){
  e.preventDefault() // prevent scrolling when inside DIV
 }, false)

 touchsurface.addEventListener('touchend', function(e){
  var touchobj = e.changedTouches[0]
  dist = touchobj.pageX - startX // get total dist traveled by finger while in contact with surface
  elapsedTime = new Date().getTime() - startTime // get time elapsed
  // check that elapsed time is within specified, horizontal dist traveled >= threshold, and vertical dist traveled <= 100
var swiperightBol = (elapsedTime <= allowedTime && dist >= threshold && Math.abs(touchobj.pageY - startY) <= 100)
handleswipe(swiperightBol)
e.preventDefault()
}, false)

}, false)

</script>

<div id="touchsurface">Swipe Me</div>

如何在javascript中实现swipeRight和swipeLeft事件

1 个答案: