Предотвратить событие Click от уровня документа к дочерним элементам

Я создаю гибридное приложение, используя структуру Sencha, где у меня есть экран настроек, когда экран настроек виден в screen Я хочу предотвратить все события касания от пользователя к другим компонентам, кроме определенных представлений. Я видел некоторые сообщения, в которых говорилось, что событие stopProgation() и preventDefault() будет продолжаться, но я не совсем понимаю это.

Я попытался добавить событие щелчка в документ, чтобы освободить список настроек из представления, когда пользователь нажимает на экран, но если пользователь нажимает на другой компонент на этом экране, он также запускает действие этой кнопки, как предотвратить это.

Также я не хочу предотвращать действие касания, когда пользователь нажимает на список настроек или какой-либо конкретный компонент, на мой взгляд.

Примечание. Я не могу использовать jquery в этом проекте, потому что использование jquery рядом с Sencha может вызвать проблемы с производительностью.

Код:

Ext.define('MyApp.view.ControlPanel.ControlPanel', {
    extend: 'Ext.Container',
    alias: "widget.controlpanel",
    requires: [
                   'Ext.SegmentedButton'
    ],
    config: {
        layout: {
            pack:'stretch'
        },
        docked:'bottom'
    },
    documentClickHandler:function(event){
        console.log('Document Clicked');

        document.removeEventListener('click', arguments.callee, false);

        var settingListContainer = Ext.ComponentQuery.query("#setting-list-container")[0];
        if (settingListContainer) {
            var controlpanel = settingListContainer.up('controlpanel');
            if (controlpanel) {
                controlpanel.remove(settingListContainer, true);
                var segmentButton = controlpanel.down("#control-segment-button");
                if (segmentButton) {
                    segmentButton.setPressedButtons();
                }
            }
        }
        event.preventDefault();
        return false;;
    },

    onSegmentToggled: function (container, button, pressed)
    {       
            console.log("Toggle Event");
            var index = container.getItems().indexOf(button);
            if (index == 0) {
                if (pressed) {
                    container.setPressedButtons();
                    var settingListContainer = this.down("#setting-list-container");
                    if (settingListContainer) {
                        this.remove(settingListContainer, true);
                        // close nav by touching the partial off-screen content

                    }
                }
            }a
            else {
                var settingListContainer = this.down("#setting-list-container");
                if (!pressed&&settingListContainer) {
                    this.remove(settingListContainer, true);
                }
                else if (pressed) {
                    var existingList = Ext.ComponentQuery.query('settingList')[0];
                    if (existingList) {
                        this.add(existingList);
                        document.addEventListener('click', this.documentClickHandler, false);
                    }
                    else {
                        this.add({ xtype: "settingList", height: '349px', sortHandler: this.config.sortHandler, segmentControl: container });
                        document.addEventListener('click',this.documentClickHandler, false);
                    }
                }
            }

    },
    listeners: [
        {
            delegate: "#control-segment-button",
            event: 'toggle',
            fn: 'onSegmentToggled'
        }
            ],
    initialize: function () {
        //Ext.require("");
        var segmentedButton = Ext.create('Ext.SegmentedButton', {
            layout: {
                type: 'hbox',
                pack: 'center',
                align: 'stretchmax'
            },
            docked: 'bottom',
            id:'control-segment-button',
            allowMultiple: false,
            allowDepress: true,
            config: { flex: 1 },
            items: [
                {
                    iconCls: 'time',
                    width: '50%',
                    cls:'palin-segment',
                    style:"border-radius:0px"
                },
                {
                    iconCls: 'settings',
                    width: '50%',
                    cls: 'palin-segment',
                    style: "border-radius:0px"
                }
            ]
        });
        this.add(segmentedButton);

    }

});