导航栏实战iconfont+flex+事件委托(梁王的开发笔记)

前言

之前写这个的时候还是太年轻了，其实可以用currentTarget然后绑定的时候绑li标签的，后面等修改吧。

html部分

<ul class="tab-head-bar">
    <li id="tab-head-myindex">                    
        <svg aria-hidden="true" class="icon">
            <use xlink:href="#icon-home_blue">
            </use>
        </svg>
    </li>
    <li id="tab-head-myplanet">                        
        <svg aria-hidden="true" class="icon">
            <use xlink:href="#icon-lightPlanet_blue">
            </use>
        </svg>
    </li>
    <li id="tab-head-mymessage">
        <svg aria-hidden="true" class="icon">
            <use xlink:href="#icon-message_blue">
            </use>
        </svg>
    </li>
    <li id="tab-head-myself">
        <svg aria-hidden="true" class="icon">
            <use xlink:href="#icon-me_blue">
            </use>
        </svg>
    </li>
</ul>

CSS（使用flex自适应,截取了些重要的）

    ul.tab-head-bar {
        display: flex;
        margin: 0 auto;
        li {
            flex: 1;
            height: 100%;
            justify-content: center; //子元素水平居中
            align-items: center; //子元素垂直居中
            display: flex;
            a {
                display: inline-block;
            }
        }
    }                             

委托实现

由于事件有时候会在子元素上触发，所以使用了递归arguments.callee({target:target.parentNode})，读者有没有更好的方法，请指教一下。

//tab 列表 ['tab-head-myindex', 'tab-head-myplanet','tab-head-mymessage', 'tab-head-myself'];
//绑定tab头事件 使用事件委托简化代码
var $tabHead = $(".tab-head-bar");
$tabHead.on("touchend", function(event) {
    var target = event.target;
    if(target.nodeName.toLocaleLowerCase() == 'li') {
        switch(target.id) {
            case 'tab-head-myindex':
                window.location.href = '/';
                break;
            case 'tab-head-myplanet':
                window.location.href = '/planet';
                break;
            case 'tab-head-mymessage':
                window.location.href = '/mymessage';
                break;
            case 'tab-head-myself':
                window.location.href = '/myself';     
                break;                       
        }
    } else if(target && (target.nodeName.toLocaleLowerCase() == 'use' || target.nodeName.toLocaleLowerCase() == 'svg')) {
        arguments.callee({target:target.parentNode})
    }
});