event.preventDefault() 究竟是如何影响 DOM 的？

Question

根据某人的建议，我在我的移动 web 应用程序中添加了这一行 $('body').on('touchstart', function(event){ event.preventDefault() }) 以禁用 iOS 中的本机应用程序弹跳。它非常适合禁用反弹，但在 DOM 的其他地方给了我一些奇怪的行为。

点击事件不起作用，等等。我希望能更好地理解它的作用以及如何解决它在 DOM 中其他地方的影响。

谢谢！

编辑：

我有这两行：

  $('body').on('touchstart', function(e){ e.preventDefault() };
  $('#home').on('click', function(){ alert('home') };

如果我注释掉 preventDefault 行，则 #home 行有效。如果我将其留在#home 行中，则不会响应。 #home 只是嵌套在body 中的一个div。

知道是什么导致了这种行为吗？它是更大代码库的一部分，因此很难向您提供所有细节，但我什至不知道从哪里开始。

再次感谢！

Answer 1

e.preventDefault() 告诉浏览器，如果此对象上的此事件有默认行为，则跳过该默认行为。

因此，例如，如果您有一个默认行为是提交表单的提交按钮，并且您在该按钮上有一个单击处理程序执行preventDefault()，那么浏览器将不会在按钮时提交表单被点击。典型的用法可能是当表单未通过验证，因此您向用户显示错误消息并且不希望将表单提交到服务器。

或者另一个例子。如果您为链接设置了点击处理程序并在该点击处理程序中调用e.preventDefault()，则浏览器将不会处理对链接的点击，也不会跟随链接中的href。