Javascript ExtJS拖动事件侦听器在Chrome和Firefox上的工作方式不同
我在窗口的标题栏(标题)中添加了一个输入字段。在Chrome上,选择和编辑输入字段是有效的,我仍然可以拖动窗口。在Firefox上,我可以在视口周围拖动窗口,但无法选择输入字段并对其进行编辑。如何更正此代码,使其在两种浏览器上都能工作 问题的快速演示:Javascript ExtJS拖动事件侦听器在Chrome和Firefox上的工作方式不同,javascript,extjs,Javascript,Extjs,我在窗口的标题栏(标题)中添加了一个输入字段。在Chrome上,选择和编辑输入字段是有效的,我仍然可以拖动窗口。在Firefox上,我可以在视口周围拖动窗口,但无法选择输入字段并对其进行编辑。如何更正此代码,使其在两种浏览器上都能工作 问题的快速演示: Ext.define('Demo.DemoWindow', { extend: 'Ext.window.Window', xtype: 'demowindow', height: 300, width: 400,
Ext.define('Demo.DemoWindow', {
extend: 'Ext.window.Window',
xtype: 'demowindow',
height: 300,
width: 400,
title: 'Window',
autoShow: true,
items: [{
xtype: 'button',
text : 'Press!',
listeners: {
click: function() {
var win = this.up('window');
var header = win.getHeader();
header.setTitle('');
var killDrag = false;
var dragEvent = win.dd.on({
beforedragstart: function(dd, e) {
if (killDrag) {
return false;
}
}
});
var field = Ext.create('Ext.form.field.Text', {
name: 'Title',
allowBlank: false,
value: 'Type here something!',
listeners: {
el: {
delegate: 'input',
mouseout: function() {
killDrag = false;
},
mouseenter: function() {
killDrag = true;
}
}
}
});
header.insert(0, field);
}
}
}]
});
Ext.application({
name: 'Demo',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'absolute',
items: [
{
xtype: 'demowindow',
x: 20,
y: 20,
}
]
});
}
});
使用
mouseover
事件而不是mouseenter
似乎对两者都很好。使用mouseover
事件而不是mouseenter
似乎对两者都很好。有趣。我在问自己,我是否应该尝试一下鼠标*事件,以便。。。你为什么这么容易找到这个答案?我看到mouseenter
事件没有在FF中触发,并表明mouseover
的行为符合我们的需要。快速测试证实了这一点。。。你知道它在IE中是否有效吗?我现在没有访问IE的权限。总有一天我会去测试我用IE 10所做的一切。至少对旧版本没有太多期望。有趣。我在问自己,我是否应该尝试一下鼠标*事件,以便。。。你为什么这么容易找到这个答案?我看到mouseenter
事件没有在FF中触发,并表明mouseover
的行为符合我们的需要。快速测试证实了这一点。。。你知道它在IE中是否有效吗?我现在没有访问IE的权限。总有一天我会去测试我用IE 10所做的一切。至少对旧版本没有太多期望。