Question

拥有基于HTML / css / Javascript的菜单系统。

菜单本身是使用Javascript动态构建的，最终结果如下：

<ul>
    <li><a href="#"><span class="icon icon-star">&nbsp;</span></a></li>
    <li><a href="#"><span class="icon icon-boat">&nbsp;</span></a></li>
    <li><a href="#"><span class="icon icon-bike">&nbsp;</span></a></li>
</ul>

我还计划拥有服务器端版本（使用服务器脚本构建菜单）和/或静态版本。当它全部启动并运行时，必须做一些基准测试。

跨度以精灵背景保存图标。

现在，我没有向每个菜单项添加事件监听器，而是向UL添加一个，并且在klick或key-down上，我从事件中找到所选的菜单项。典型地：

a = event.target;

// Find the LI element.
for (li = a; li && li.nodeName != "LI"; li = li.parentNode)
    ;

// Find the anchor (Typically if the span was clicked).
if (a.nodeName !== 'A')
    for (; a && a.nodeName != "A"; a = a.parentNode)
        ;

这样可以正常工作，但问题在于如何识别应采取的操作 - 如单击哪个菜单项。

使用data-代码是否可以？

通常类似于：

<a href="#" data-menu="1">...

然后使用switch例程来确定菜单条目。

我最初的想法是使用ID，但我认为使用data-属性更灵活，更不容易发生冲突和并发症。

最初，每个菜单只附加一个事件监听器背后的想法是减少页面加载时的负载，而是在单击菜单条目时执行查找，在大多数情况下可以优先使用它涉及资源使用。我还需要通过在菜单选择时添加/删除LI类来设置.menu_selected元素的样式。

我对整个设计有点不确定。它通过我已经完成的（很少）测试工作正常，但可能会有一些我没有看到的警告。

这仅针对浏览器。 HTML5 +画布。

...现在我不确定这个问题有多好，但如果不合适，我会试一试并删除。

Answer 1

使用data-代码是否可以？

当然，您可以在任何选择器上委派事件。

jQuery库也使这更容易：

$('ul').on('click', '[data-menu]', function () {
    ...do awesome stuff...
});

上面的代码将点击处理程序绑定到任何和所有<ul>元素，并触发与<ul>选项匹配的'[data-menu]'元素中点击的任何元素上的事件回调。

我不建议添加jQuery以添加jQuery，但jQuery对于管理委派事件非常有用。如果您能够轻松下载额外的库，那么它将使编写代码变得更加容易。

数据属性作为回调标识符

1 个答案: