javascript - ExtJS 拖动事件监听器在 Chrome 和 Firefox 上的工作方式不同

Question

我已将输入字段添加到窗口的标题栏(标题)。在 Chrome 上，选择和编辑输入字段是可行的，而且我仍然可以拖动窗口。在 Firefox 上，我可以在视口(viewport)周围拖动窗口，但无法选择输入字段并对其进行编辑。我应该如何更正此代码以便它可以在两种浏览器上运行？

问题的快速演示:

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,
                }
            ]
        });
    }
});

Answer 1

使用 mouseover 事件而不是 mouseenter 似乎两者都可以很好地工作。