The source code

    /**
     * @ignore
     * menu item ,child component for menu
     * @author yiminghe@gmail.com
     */
    KISSY.add("menu/menuitem", function (S, Component, MenuItemRender) {

        var $ = S.all;

        /**
         * @class KISSY.Menu.Item
         * A menu item component which menu is consisted of.
         * xclass: 'menuitem'.
         * @extends KISSY.Component.Controller
         */
        var MenuItem = Component.Controller.extend({

                /**
                 * Handle mouseenter event. Make parent menu to highlight itself.
                 * Protected, should only be overridden by subclasses.
                 * @param {KISSY.Event.DOMEventObject} e Mouseenter event object.
                 * @protected
                 */
                handleMouseEnter: function (e) {
                    // 父亲不允许自己处理
                    if (MenuItem.superclass.handleMouseEnter.call(this, e)) {
                        return true;
                    }
                    this.get("parent").set("highlightedItem", this);
                },

                /**
                 * Handle mouseleave event. Make parent menu to unhighlight itself.
                 * Protected, should only be overridden by subclasses.
                 * @param {KISSY.Event.DOMEventObject} e Mouseleave event object.
                 * @protected
                 *
                 */
                handleMouseLeave: function (e) {
                    // 父亲不允许自己处理
                    if (MenuItem.superclass.handleMouseLeave.call(this, e)) {
                        return true;
                    }
                    this.get("parent").set("highlightedItem", null);
                },

                // for ios, ios only has touchdown
                handleMouseDown: function (e) {
                    // 父亲不允许自己处理
                    if (MenuItem.superclass.handleMouseDown.call(this, e)) {
                        return true;
                    }
                    this.get("parent").set("highlightedItem", this);
                },

                /**
                 * Perform default action when click on enter on this menuitem.
                 * If selectable, then make it selected.
                 * If checkable, then toggle it.
                 * Finally fire click on its parent menu.
                 * @protected
                 */
                performActionInternal: function () {
                    var self = this;
                    // 可选
                    if (self.get("selectable")) {
                        self.set("selected", true);
                    }
                    // 可选中，取消选中
                    if (self.get("checkable")) {
                        self.set("checked", !self.get("checked"));
                    }
                    self.fire("click");
                    return true;
                },

                _onSetHighlighted: function (v) {
                    // 是否要滚动到当前菜单项(横向，纵向)
                    if (v) {
                        var el = this.get("el"),
                        // 找到向上路径上第一个可以滚动的容器，直到父组件节点（包括）
                        // 找不到就放弃，为效率考虑不考虑 parent 的嵌套可滚动 div
                            p = el.parent(function (e) {
                                return $(e).css("overflow") != "visible";
                            }, this.get("parent").get("el").parent());
                        if (!p) {
                            return;
                        }
                        el.scrollIntoView(p, undefined, undefined, true);
                    }
                },

                /**
                 * Check whether this menu item contains specified element.
                 * @param {KISSY.NodeList} element Element to be tested.
                 * @protected
                 */
                containsElement: function (element) {
                    return this.get('view') && this.get('view').containsElement(element);
                }

            }, {
                ATTRS: {

                    focusable: {
                        value: false
                    },

                    handleMouseEvents: {
                        value: false
                    },

                    /**
                     * Whether the menu item is selectable or not.
                     * Set to true for option.
                     * @cfg {Boolean} selectable
                     */
                    /**
                     * @ignore
                     */
                    selectable: {
                        view: 1
                    },

                    /**
                     * Whether the menu item is checkable or not.
                     * Set to true for checkbox option.
                     * @cfg {Boolean} checkable
                     */
                    /**
                     * @ignore
                     */
                    checkable: {
                        view: 1
                    },

                    /**
                     * The value associated with the menu item.
                     * @cfg {*} value
                     */
                    /**
                     * The value associated with the menu item.
                     * @property value
                     * @type {*}
                     */
                    /**
                     * @ignore
                     */
                    value: {},

                    /**
                     * Whether the menu item is checked.
                     * @type {Boolean}
                     * @property checked
                     */
                    /**
                     * Whether the menu item is checked.
                     * @cfg {Boolean} checked
                     */
                    /**
                     * @ignore
                     */
                    checked: {
                        view: 1
                    },

                    /**
                     * Whether the menu item is selected.
                     * @type {Boolean}
                     * @property selected
                     */
                    /**
                     * Whether the menu item is selected.
                     * @cfg {Boolean} selected
                     */
                    /**
                     * @ignore
                     */
                    selected: {
                        view: 1
                    },

                    xrender: {
                        value: MenuItemRender
                    }
                }
            }, {
                xclass: "menuitem",
                priority: 10
            });

        return MenuItem;
    }, {
        requires: ['component/base', './menuitem-render']
    });