混合APP默认行为e.preventDefault与e.stopPropagation()的使用

Question

一直在尝试混合开发，页面换完了但是遗留下来很多问题。在挨个攻克和优化，但有些问题总找不到方法，摸索不都。
如果有大神也可以留个联系方式进行探讨。我在app里调用的是原生的上拉加载，下拉刷新。原生里 开新页面的时候要打开一层webview讲路径引向h5页面。所以刷新的时候是整个屏幕都在刷新，我用iscroll的方法做了局部刷新所以就必须阻止浏览器的默认行为这样就又引来很多问题，左滑返回被阻止了，ios点击返回程序还会卡死。有相同经历的吗？？？？？请指教？？？

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

这两种事件处理方式（e.preventDefault() 和 e.stopPropagation()）都是用来防止浏览器默认行为的，它们各自有不同的用途和场景。

1. e.preventDefault()：
   • preventDefault() 方法用于阻止事件的默认行为，比如鼠标点击时的跳转到其他页面、键盘输入后自动提交表单等。
   • 它们通常用于避免一些用户可能会意外触发的行为，例如点击按钮导致网页跳转或弹出对话框。
   • 例如，在你提到的情况中，如果想阻止整个页面的滚动，可以这样做：

window.addEventListener('scroll', function(e) {
    e.preventDefault();
});

1. e.stopPropagation()：
   • stopPropagation() 方法阻止事件冒泡，即阻止事件向上传递给父元素。这意味着事件将不会传播到其包含的所有祖先节点，从而阻止了可能发生的导航或其他行为。
   • 这种情况下的使用更加针对特定元素或者组件内部的行为，例如在滚动条到达底部时阻止页面的滚动。
   • 在你的例子中，你可以使用这个方法来阻止左滑返回和iOS点击返回程序卡死的问题：

document.addEventListener('touchmove', function(event) {
    event.preventDefault();
}, { passive: false });

或者

document.body.addEventListener('touchstart', function(event) {
    event.preventDefault();
}, { passive: false });

请注意，这两个方法不能单独使用，因为它们会相互冲突。如果你想要同时阻止事件的默认行为和阻止事件的冒泡，你需要组合使用它们。

此外，这些解决方案只适用于JavaScript环境，如果你想实现类似的效果在Webview的情况下，可能需要考虑其他方法，如监听用户的触摸事件并阻止其移动到目标区域。

希望这些建议能帮助你解决遇到的问题！如果你提供具体的示例代码，我可以更详细地指导如何应用这些方法。