OffcanvasMenu 插件 - 点击事件，Shopware 6答案

【问题标题】：OffcanvasMenu plugin - click event, Shopware 6OffcanvasMenu 插件 - 点击事件，Shopware 6
【发布时间】：2021-09-16 19:58:27
【问题描述】：

我在为 OffcanvasMenu 列表添加点击事件时遇到问题。我需要为每个 li 元素添加此事件。我正在使用 Shopware 6。但是当我尝试使用 jQuery 为 li 元素添加点击事件时，什么也没有发生。我已经扩展了 OffcanvasMenu。这是我的代码：

import OffcanvasMenuPlugin from 'src/plugin/main-menu/offcanvas-menu.plugin.js';

export default class ExtendOffcanvasMenuPlugin extends OffcanvasMenuPlugin {
    init() {
        super.init();
        this._registerEvents();
        console.log("inner");
    }

    _registerEvents() {
        super._registerEvents();

        let list = document.querySelector('.navigation-offcanvas-list-item');

        console.log(list);

        list.addEventListener('click', (e) => {
            console.log("inner event");
            e.preventDefault();
        });
    }
}

在 main.js 文件中我覆盖了这个插件：

PluginManager.override('OffcanvasMenu', ExtendOffcanvasMenuPlugin, '[data-offcanvas-menu]');

是否可以在 OffcanvasMenu 插件的每个 li 元素上添加事件？

【问题讨论】：

标签： javascript shopware

【解决方案1】：

一般问题似乎是当前代码使用querySelector 来收集所有元素。然而querySelector 只产生与选择器匹配的第一个元素，即使有多个，请参阅：https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

您可以通过使用querySelectorAll 来解决这个问题，它的作用基本相同，但返回所有找到的元素的可迭代列表。然后您可以遍历列表并将侦听器附加到每个元素：

import OffcanvasMenuPlugin from 'src/plugin/main-menu/offcanvas-menu.plugin.js';

export default class ExtendOffcanvasMenuPlugin extends OffcanvasMenuPlugin {
    _registerEvents() {
        super._registerEvents();

        let list = document.querySelectorAll('.navigation-offcanvas-list-item');

        console.log(list);

        list.forEach((listItem) => {
            listItem.addEventListener('click', (e) => {
                console.log("inner event");
                e.preventDefault();
            });
        });
    }
}

这在理论上可行，但实际上a.navigation-offcanvas-link 在您要附加侦听器的<li> 内。 a.navigation-offcanvas-link 元素已经有一个事件监听器 (_getLinkEventHandler) 并且还占用了 <li> 内的所有空间，这就是 <li> 本身实际上不可点击的原因。

解决方法可能是首先从a.navigation-offcanvas-link 中删除侦听器并使其不可点击，但这取决于您想要实现的目标。每次单击菜单项时是否应该执行一些额外的操作？然后你可以考虑直接扩展方法_getLinkEventHandler，即使它被标记为私有并且在未来的版本中可能会改变。

【讨论】：