Question

我使用Sencha框架工作创建一个混合应用程序，其中我有一个设置屏幕，当屏幕上显示设置屏幕时我想阻止用户从除特定视图之外的其他组件的所有触摸事件。我看到一些帖子说事件stopProgation（）和preventDefault（）将事件进一步但我不清楚它。

我尝试将click事件添加到文档以在用户点击屏幕时从视图中释放我的设置列表，但如果用户点击该屏幕中的其他组件，它也会触发该按钮操作，如何防止这种情况。 / p>

此外，当用户点击我的视图中的设置列表或某个特定组件时，我不想阻止触摸操作。

注意：我无法在此项目中使用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（）;是阻止框架或文档处理此事件的原因。

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

1 个答案: