jquery - 当 css 中的位置在 jquery 中是绝对时，单击事件不起作用

Question

代码如下:

$('#navigationLink').on('touchstart', function() {
  //debugger;
  var navi = $(this).find('p').attr('navi');
  if (navi == 'tryit') {
    alert('try');
  }
  if (navi == 'view') {
    alert('view');
  }
  if (navi == 'next') {
    alert('next');
  }
});

.pos_next {
  position: absolute;
  bottom: 2%;
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navigationLink" class="col-xs-12 align_center pos_next">
  <p class="page_4_titles font_futura_bold clr_black" navi="next">Next Question</p>
</div>

更多信息请查看fiddle https://jsfiddle.net/Lf0f8a4u/

Answer 1

在计算机上，您没有 touchstart 事件。它是 mousedown 或 click。

$('#navigationLink').on('click', function() {
  debugger;
  var navi = $(this).find('p').attr('navi');
  if (navi == 'tryit') {
    alert('try');
  }
  if (navi == 'view') {
    alert('view');
  }
  if (navi == 'next') {
    alert('next');
  }

});

.pos_next {
  position: absolute;
  bottom: 2%;
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navigationLink" class="col-xs-12 align_center pos_next">
  <p class="page_4_titles font_futura_bold clr_black" navi="next">Next Question</p>
</div>

信息

---

如果您想要计算机和移动浏览器的兼容版本，您可以使用 $('').on('touchstart click', function...。

touchstart 和click 的区别在于，touchstart 在移动浏览器中直接触发为 click在你的电脑。 click-Event 在 iPhone Safari 上有 300 毫秒的延迟，因为它们会检查用户是否想要双击缩放手势。