如何在事件内修改事件时使用stopPropagation？附代码问题求解

嘿，我来帮你拆解这个问题～首先得明确：你遇到的函数立即触发问题，根本原因不是事件冒泡，所以stopPropagation()在这里派不上用场。咱们先看看代码里的关键问题：

在你的showSearch()函数里，这一行代码：

document.getElementById("search").onclick = search(ev);

你这里是直接调用了search(ev)函数，把它的返回值（如果有的话）赋值给了onclick，而不是把search函数本身绑定为事件处理函数。这就是为什么它会立即执行，而不是等下次点击才触发。

下面给你几种靠谱的解决方法：

方法1：用匿名函数包裹（最常用） #

把search函数放在匿名函数里，这样赋值给onclick的是匿名函数的引用，只有当点击事件触发时，才会执行内部的search(ev)：

function showSearch() {
  document.getElementById("search").onclick = function(ev) {
    // 这里可以修改事件对象的keyCode
    ev.keyCode = 13;
    search(ev);
  };
}

如果喜欢简洁的写法，也可以用箭头函数：

function showSearch() {
  document.getElementById("search").onclick = (ev) => {
    ev.keyCode = 13;
    search(ev);
  };
}

方法2：使用bind绑定上下文/参数（适合需要固定参数的场景） #

如果search函数不需要动态修改事件对象，只是需要绑定固定参数，可以用bind来创建一个新的函数引用，避免立即执行：

// 假设search接受keyCode作为参数的情况
function search(keyCode) {
  // 你的搜索逻辑
}

function showSearch() {
  // 绑定keyCode=13到search函数，返回一个新的函数
  const boundSearch = search.bind(null, 13);
  document.getElementById("search").onclick = boundSearch;
}

方法3：直接替换事件处理函数（无需额外包裹） #

如果search函数本身可以直接接收事件对象，你可以直接把函数引用赋值给onclick，然后在search内部处理keyCode的修改：

function search(ev) {
  // 在函数内部修改keyCode
  ev.keyCode = 13;
  // 你的搜索逻辑
}

function showSearch() {
  // 注意这里是search，不是search(ev)！
  document.getElementById("search").onclick = search;
}

补充说明 #

为什么stopPropagation()没用？因为当前的问题是函数被主动调用，而不是事件冒泡导致的多次触发。事件冒泡是指同一个事件在DOM树上从子元素传到父元素，而你这里是在赋值事件处理函数的瞬间就执行了search，和事件流完全无关。

内容的提问来源于stack exchange，提问作者hm1912