cancelable 参数声明事件是否可取消，真正取消需调用 preventdefault() 并检查 defaultprevented；仅当 customevent 显式设置 cancelable: true 时 preventdefault() 才生效，且 dispatchevent() 返回值仅在此情况下有意义。
在 javascript 中，cancelable 参数本身并不“允许”事件被取消，而是**声明该事件是否可以被取消**。真正实现拦截并取消行为的，是事件对象上的 preventdefault() 方法，配合事件监听器中对 event.defaultprevented 的判断。关键在于：只有将 cancelable: true 传入 customevent 构造函数，后续调用 preventdefault() 才会生效。
创建可取消的自定义事件
使用 CustomEvent 构造函数时，必须显式设置 cancelable: true，否则 event.preventDefault() 调用无效（不会改变 defaultPrevented 状态）。
- ✅ 正确写法（可取消）：
const evt = new CustomEvent('my-action', { cancelable: true }); - ❌ 错误写法（不可取消）：
const evt = new CustomEvent('my-action'); // 默认 cancelable: false
在监听器中拦截并取消默认行为
监听器通过调用 event.preventDefault() 表示“我决定阻止后续逻辑执行”。触发方需主动检查 event.defaultPrevented 来决定是否继续。
- 监听器示例：
element.addEventListener('my-action', (e) => {<br> if (shouldBlock()) e.preventDefault();<br>}); - 触发方需响应取消：
element.dispatchEvent(evt);<br>if (evt.defaultPrevented) {<br> console.log('已被外部取消，跳过默认处理');<br> return;<br>}
注意 dispatchEvent 的同步性与返回值
dispatchEvent() 是同步执行的，所有注册的监听器按顺序运行完毕后才返回布尔值。这个返回值表示：事件是否被取消（即是否有监听器调用了 preventDefault()），但**仅当事件是可取消的（cancelable: true）时才有意义**。
- 若
cancelable: true，dispatchEvent()返回false表示至少一个监听器调用了preventDefault()；返回true表示未被取消。 - 若
cancelable: false，无论是否调用preventDefault()，返回值恒为true—— 此时该方法无实际效果。
实用建议
把“是否取消”当作一种通信契约：事件发起者定义语义（如 'submit-request'），监听者有权否决，发起者必须尊重结果。
- 始终在构造事件时明确写
{ cancelable: true }，避免隐式 false 导致静默失败 - 不要依赖
preventDefault()改变业务状态，它只应表达“否决意图”，具体逻辑由触发方根据defaultPrevented判断后执行 - 对于需要多级拦截的场景（如父组件/子组件都监听同一事件），确保事件冒泡可控，必要时用
stopPropagation()配合
