为何jQuery .click()自动触发？封装通用点击函数遇异常

核心错误：直接调用函数而非传递回调引用 #

你遇到的问题根源很明确：在绑定点击事件时，你直接执行了itemClicked('#DoorShopCod')，而不是把这个函数作为回调传递给.click()方法。

当你写.click(itemClicked('#DoorShopCod'))时，JavaScript会立刻执行itemClicked函数（这就是为什么页面加载时控制台就打印了参数值），然后把函数的返回值（这里是undefined，因为你的函数没有return语句）作为点击事件的处理函数。这就导致两个问题：

• 页面刚加载，函数就自动触发了
• 实际点击按钮时，因为处理函数是undefined，所以完全没有反应

另外你还犯了一个拼写错误：#DoorShopCod应该是#DoorShopCode（少了最后一个字母e），这会导致选择器找不到目标元素，即使修复了函数调用问题，面板切换也会失效。

修复方法（两种可选） #

方法一：用匿名函数包裹，保留this指向

用匿名函数包装itemClicked的调用，同时通过call()确保itemClicked里的this指向当前点击的菜单元素（这样$(this).addClass("active")才能正确生效）：

$("#DoorShopButon span.VMenu").hover(hoverItem).click(function() {
  itemClicked.call(this, '#DoorShopCode');
});

方法二：让itemClicked返回一个回调函数

修改itemClicked，让它返回一个函数，这样可以直接传递给.click()，同时自动保留this指向：

function itemClicked(p) {
  // 返回一个函数作为点击事件的回调
  return function() {
    $('.VMenu').removeClass("active");
    $(this).addClass("active");
    $("#MainShop").remove();
    $('.shop').removeClass("activeShop");
    $(p).addClass("activeShop");
    console.log(p);
  }
}

之后绑定事件时就可以直接写：

$("#DoorShopButon span.VMenu").hover(hoverItem).click(itemClicked('#DoorShopCode'));

优化：统一所有菜单的绑定逻辑 #

既然你想避免重复代码，可以把所有菜单按钮的绑定逻辑都用这个函数统一处理，让代码更简洁：

$(document).ready(function() {
  console.log("ready!");

  // 封装通用绑定函数
  function bindMenuButton(buttonSelector, targetPanelSelector) {
    $(buttonSelector)
      .hover(hoverItem)
      .click(function() {
        itemClicked.call(this, targetPanelSelector);
      });
  }

  // 批量绑定所有菜单
  bindMenuButton("#WindowShopButon span.VMenu", '#WindowsShopCode');
  bindMenuButton("#DoorShopButon span.VMenu", '#DoorShopCode');
  bindMenuButton("#BlindsShopButon span.VMenu", '#BlindsShopCode');
  bindMenuButton("#OptionsShopButon span.VMenu", '#OptionsShopCode');
});

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