jQuery toggle()可见性异常：首次点击触发两次问题求助

问题描述 #

使用jQuery的toggle()控制搜索框可见性时，首次点击触发元素会导致事件执行两次，toggle()也会被调用两次，表现为元素先显示后立刻隐藏（或相反状态切换两次）。相关代码如下：

function handleSearchToggle() {
  $(prestashop.themeSelectors.header.searchToggle).off('click');
  $(prestashop.themeSelectors.header.searchToggle).on("click", function(e) {
    $(prestashop.themeSelectors.header.searchBox).toggle();
    console.log('stop');
    e.preventDefault();
  });
}

$(() => {
  handleSearchToggle();
});

可能原因及对应解决方案 #

1. 事件冒泡引发重复触发

若触发元素嵌套在另一个绑定了click事件的父元素中，点击时事件会向上冒泡，导致父元素的事件也被执行，间接引发两次toggle操作。

解决方法：在事件处理函数中添加e.stopPropagation()阻止事件冒泡：

function handleSearchToggle() {
  $(prestashop.themeSelectors.header.searchToggle).off('click');
  $(prestashop.themeSelectors.header.searchToggle).on("click", function(e) {
    $(prestashop.themeSelectors.header.searchBox).toggle();
    console.log('stop');
    e.preventDefault();
    e.stopPropagation(); // 阻止事件冒泡到父元素
  });
}

2. 事件绑定逻辑被重复执行

handleSearchToggle函数可能被多次调用（比如PrestaShop钩子重复触发、页面异步加载导致重复初始化），即便每次绑定前调用off('click')，多次执行绑定逻辑仍可能出现重复绑定问题。

解决方法：使用事件命名空间精准管理绑定的事件，避免误删其他业务逻辑的click事件，同时确保每次绑定前只移除当前逻辑的事件：

function handleSearchToggle() {
  // 使用命名空间移除当前逻辑绑定的click事件
  $(prestashop.themeSelectors.header.searchToggle).off('click.searchToggle');
  // 绑定带命名空间的事件
  $(prestashop.themeSelectors.header.searchToggle).on("click.searchToggle", function(e) {
    $(prestashop.themeSelectors.header.searchBox).toggle();
    console.log('stop');
    e.preventDefault();
  });
}

3. 选择器匹配多个DOM元素

检查prestashop.themeSelectors.header.searchToggle对应的选择器是否匹配了多个元素，点击时每个匹配元素都会触发事件，导致toggle执行两次。

排查方法：在浏览器控制台执行以下代码，查看匹配的元素数量：

console.log($(prestashop.themeSelectors.header.searchToggle).length);

若结果大于1，说明选择器不够精准，需调整选择器（比如添加父元素限定、使用唯一ID）指向单个触发元素。

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