防止从文档级别到子元素的单击事件

Question

我正在使用Sencha 框架创建一个混合应用程序，其中我有一个设置屏幕，当设置屏幕在屏幕中可见时，我想防止用户对除特定视图之外的其他组件的所有触摸事件。我看到一些帖子说事件 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);

    }

});

Answer 1

event.preventDefault();是阻止框架或文档处理此事件的原因。