real跟你侃代码 - 聊聊 e.stopPropagation与e.preventDefault

简介

e.stopPropagation()是一个事件对象的方法，用于停止事件的进一步传播。当在事件处理程序中，调用e.stopPropagation()时，它会阻止事件继续向上层元素进行冒泡或下层元素进行捕获。

在给定的代码中，e.stopPropagation() 被用于阻止 onKeyDown 事件的进一步传播。具体来说，在按下键盘的Enter键时，通过调用e.stopPropagation()，事件不会继续向上层元素传播，这意味着其他包含输入框的父元素不会收到相同的事件。

这样做的目的是为了在按下Enter键时防止触发其他可能与输入框无关的事件或处理程序。通过阻止事件传播，可以确保按下Enter键只会触发输入框相关的事件（例如调用 handleValue()），而不会触发其他意外的行为。 需要注意的是，e.stopPropagation() 只阻止事件的传播，而不会阻止事件的默认行为。如果还需要阻止行为，例如，阻止表单提交），可以在 onKeyDown 事件处理程序中添加 e.preventDefault()。

onKeyDown={(e: any) => {
  if (e.keyCode === KeyCode.Enter) {
    e.stopPropagation();
    e.preventDefault(); // 阻止默认行为，如表单提交
    ref.current?.blur?.();
    handleValue();
  }
}}

这样做可以确保在按下 Enter 键时只触发所需的操作，并防止其他意外的行为发生。

应用场景

e.stopPropagation() 和 e.preventDefault() 方法在事件处理中有以下应用场景：

e.stopPropagation() 的应用场景：

1. 阻止事件冒泡 : 当一个元素触发了某个事件，例如点击事件，该事件会一直向上层元素冒泡，直到达到文档根节点。通过调用 e.stopPropagation() 可以阻止事件继续向上层元素传播，使其只在当前元素上触发，不影响其他元素。这在需要限制事件范围或避免冲突的情况下很有用。

2. 组织事件委托 : 事件委托是指将事件处理程序绑定在父元素上，通过事件冒泡机制来处理子元素的事件。如果希望某个特定的子元素不触发事件委托，可以在子元素的事件处理程序中调用 e.stopPropagation()，以阻止事件继续向上层元素传播，从而避免被委托的处理程序执行。

e.preventDefault() 的应用场景：

1. 阻止默认行为 : 某些元素在触发特定事件时会有默认的行为。例如，点击 <a> 标签时会跳转到链接的 URL，提交表单时会刷新页面。通过调用 e.preventDefault()，可以阻止元素触发默认行为，从而在需要自定义行为或防止页面刷新的情况下使用。

2. 处理自定义交互 : 在一些自定义交互场景中，可以利用 e.preventDefault() 来阻止默认行为，并根据事件的具体情况执行自定义的交互逻辑。例如，通过捕捉拖放事件并阻止默认行为，可以实现自定义的拖放操作。

需要注意的是，在使用这两个方法时，应根据具体需求和场景进行慎重使用。过度使用或错误使用这些方法可能导致意外行为或阻止本应执行的功能。确保清楚理解这两个方法的作用和影响，并根据实际需求正确地应用它们。

小结

本周是8月的最后一周，马上到9月了，有的时候会非常的怅然，感觉每天都在在忙碌，自己好似进步了，又好似在原地踏步。希望上天保佑努力奋斗的孩子。🥤🦋