Javascript 阻止从文档级别到子元素的单击事件
我正在使用框架创建一个混合应用程序,其中我有一个设置屏幕,当设置屏幕在屏幕中可见时,我希望阻止用户对除特定视图以外的其他组件的所有触摸事件。我看到一些帖子说,事件停止和预防违约将进一步影响事件,但我不清楚这一点 我试图将click事件添加到文档中,以在用户点击屏幕时从视图中释放我的设置列表,但如果用户点击该屏幕中的其他组件,它也将触发该按钮操作,如何防止这种情况 另外,当用户点击设置列表或我视图中的某些特定组件时,我不想阻止触摸操作 注意:我无法在此项目中使用jquery,因为将jquery与Sencha一起使用可能会导致性能问题 代码:Javascript 阻止从文档级别到子元素的单击事件,javascript,extjs,sencha-touch,sencha-architect,Javascript,Extjs,Sencha Touch,Sencha Architect,我正在使用框架创建一个混合应用程序,其中我有一个设置屏幕,当设置屏幕在屏幕中可见时,我希望阻止用户对除特定视图以外的其他组件的所有触摸事件。我看到一些帖子说,事件停止和预防违约将进一步影响事件,但我不清楚这一点 我试图将click事件添加到文档中,以在用户点击屏幕时从视图中释放我的设置列表,但如果用户点击该屏幕中的其他组件,它也将触发该按钮操作,如何防止这种情况 另外,当用户点击设置列表或我视图中的某些特定组件时,我不想阻止触摸操作 注意:我无法在此项目中使用jquery,因为将jquery与S
违约事件;是什么阻止框架或文档也处理此事件
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);
}
});