javascript - 使用 jQuery 插件触摸事件不触发 AJAX -- Hammer.js

Question

我已经包括了<script src="hammer.js"></script>和 <script src="../jquery.hammer.js-master/jquery.hammer.js"></script>正确地在我的标题中。

我有一个 AJAX 事件，它由鼠标单击(动态和相关菜单)触发。单击第一个菜单中的哪个确定下一个菜单的内容。这在台式机和笔记本电脑上运行良好，但在移动设备上运行不佳。在 AJAX 加载下一个菜单之前，您必须点击菜单两次。

HTML 代码:

<label> Choose a Menu:</label>
<select id="menu" name="menu" class="menu">
<option class = 'option' value = '1'>Whatsapp</option>
<option class = 'option' value = '2'>19Billion USD</option>
<option class = 'option' value = '3'>Facebook</option>
</select>
<p id = 'news'> </p>

jQuery AJAX:

$("#menu").click(function()  
{  
    var menuId = $(this).val();
    var request = $.ajax({
      url: "news.php",
      type: "POST",
      data: { id : menuId },
      dataType: "html"
    });

    request.done(function( msg ) {
      $("#news").html( msg ); 
    });
});  

Hammer.js 代码:

var element = document.getElementById('menu');
var hammertime = Hammer(element).on("tap", function(event) {
var menuId = $('#menu').val();
var request = $.ajax({
  url: "news.php",
  type: "POST",
  data: { id : menuId },
  dataType: "html"
});

request.done(function( msg ) {
  $("#news").html( msg ); 
});
});

提前谢谢你。

Answer 1

添加拖动和滑动事件。第一个选项卡可能被识别为拖动或滑动。

请将所有触摸事件类型打印到控制台。

var hammertime = Hammer(element).on("tap drag swipe", function(event) {