问OffcanvasMenu插件点击事件，Shopware 6
EN

Stack Overflow用户

提问于 2020-12-16 05:29:56

回答 1查看 325关注 0票数 1

我在为list of OffcanvasMenu添加单击事件时遇到问题。我需要为每个li元素添加此事件。我正在使用Shopware6，但是当我尝试使用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

Stack Overflow用户

发布于 2021-09-16 11:58:27

一般的问题似乎是当前的代码使用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，即使它被标记为私有的，并且在未来的版本中可能会发生变化。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65313980

复制

相似问题

问OffcanvasMenu插件点击事件，Shopware 6
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问OffcanvasMenu插件点击事件，Shopware 6EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问OffcanvasMenu插件点击事件，Shopware 6
EN