uikit 3 - uk-switcher li 上的 onbeforehide 事件（选项卡头）答案

【问题标题】：uikit 3 - onbeforehide event on uk-switcher li (tab heads)uikit 3 - uk-switcher li 上的 onbeforehide 事件（选项卡头）
【发布时间】：2021-08-12 13:32:49
【问题描述】：

我正在使用uikit 3.6.17，我正在尝试捕捉ul> li.uk-active 的更改事件。根据docs ，uk-switcher 组件应该会触发一些事件，但在ul > li 上添加uk-active 类时不会触发任何事件。

在移动到下一个选项卡之前我必须进行一些验证，如果当前选项卡中的验证不正确，我想preventDefault()。当前结果是tab head在点击的tab下划线，但是tab内容没有改变。

根据usage docs，应该像这样监听事件：

UIkit.util.on('#offcanvas', 'show', function () {
    // do something
});

我的代码

<ul uk-tab id="tabHeads">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<ul class="uk-switcher uk-margin">
    <li>Lorem </li>
    <li>Ut enim </li>
    <li>Duis aute </li>
</ul>

如果我这样做

UIkit.util.on('.uk-switcher', 'beforehide', function (ev) {
// this works and stop navigation to next clicked tab
    ev.PreventDefault();
});

现在我做了一些类似这样的事情（为了停止点击标签被下划线）：

//this get attached but never triggered
UIkit.util.on('#tabHeads', 'beforehide', function (ev) {
     ev.PreventDefault();
});

我是否将事件附加到错误的元素？

【问题讨论】：

标签： javascript jquery-events getuikit

【解决方案1】：

是的，您将事件附加到错误的元素
您需要附加开关主体而不是标签头

<ul uk-tab>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<ul class="uk-switcher uk-margin"  id="tabsBody">
    <li>Lorem </li>
    <li>Ut enim </li>
    <li>Duis aute </li>
</ul>

UIkit.util.on('#tabsBody', 'beforehide', function (ev) {
     ev.PreventDefault();
});

【讨论】：