jQuery click和touchstart/touchend之间的冲突

p3rjfoxz 于 2023-06-22 发布在 jQuery

关注(0)|答案(1)|浏览(133)

我有一个检测touchstart和touchend的部分（它可以工作），但是我有一个链接不能检测点击。
发生什么事了？

main使用溢出。这就是问题所在吗

$("#main").on("touchstart, touchend", function(e) {
  e.preventDefault();

  console.log("touch zone>");
})

$(document).on("click", "#main a", function(e) {
  e.preventDefault();

  console.log("Button click");
});

#main {
  width: 40vh;
  height: 90vh;
  overflow: hidden auto;
  background: Gray;
}

<section id="main">
  <h1>Title demo <a href="#">Link</a></h1>
  <p>Lorem Lorem Lorem Lorem Lorem Lorem</p>

  <h1>Title demo <a href="#">Link</a></h1>
  <p>Lorem Lorem Lorem Lorem Lorem Lorem</p>

  <h1>Title demo <a href="#">Link</a></h1>
  <p>Lorem Lorem Lorem Lorem Lorem Lorem</p>

  <h1>Title demo <a href="#">Link</a></h1>
  <p>Lorem Lorem Lorem Lorem Lorem Lorem</p>

  <h1>Title demo <a href="#">Link</a></h1>
  <p>Lorem Lorem Lorem Lorem Lorem Lorem</p>

  <h1>Title demo <a href="#">Link</a></h1>
  <p>Lorem Lorem Lorem Lorem Lorem Lorem</p>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

jquery

来源：https://stackoverflow.com/questions/76465266/jquery-conflict-between-click-and-touchstart-touchend

1条答案

按热度按时间

ivqmmu1c1#

锚点用于导航，按钮用于操作。请确保您使用的是任务的正确元素。您可以根据需要设置它们的样式。
这可能也有助于消除对preventDefault()的需要，我认为这是问题所在。
其他提示：

一个节不应有多个1级标题。它应该有一个描述该部分的主要标题和描述子部分的二级标题。
不要使用内联样式。它们会使您的文档变得凌乱、不易维护、容易导致重复，并且不可重用。

$("#main").on("touchstart, touchend", () => {
  console.log("touch zone");
})

$(document).on("click", "#main button", () => {
  console.log("Button click");
});

.main {
  width: 40vh;
  height: 90vh;
  overflow: hidden auto;
  background: Gray;
}

<section id="main" class="main">
  <h1>Title demo <button>Action</button></h1>
  <p>Lorem Lorem Lorem Lorem Lorem Lorem</p>
  <h1>Title demo <button>Action</button></h1>
  <p>Lorem Lorem Lorem Lorem Lorem Lorem</p>
  <h1>Title demo <button>Action</button></h1>
  <p>Lorem Lorem Lorem Lorem Lorem Lorem</p>
  <h1>Title demo <button>Action</button></h1>
  <p>Lorem Lorem Lorem Lorem Lorem Lorem</p>
  <h1>Title demo <button>Action</button></h1>
  <p>Lorem Lorem Lorem Lorem Lorem Lorem</p>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

赞(0）回复(0）举报 2023-06-22

我来回答

jQuery click和touchstart/touchend之间的冲突

main使用溢出。这就是问题所在吗

1条答案

相关问题

热门标签

最新问答