`
yeak2001
  • 浏览: 102833 次
  • 性别: Icon_minigender_1
  • 来自: 无锡
社区版块
存档分类
最新评论

window event

阅读更多
  今天在用EXT的Ext.form.TwinTriggerField的时候遇到一个问题,在IE下按下ENTER可以对EXT.GRID进行异步,但在FF下就不行,查遍资料,发现是TEXT FILED的EVENT事件在作怪,按下ENTER后会提交整个FORM,异步也就失败了。
  一开始还在想是不是事件注册错误
Ext.app.SearchField = Ext.extend(Ext.form.TwinTriggerField, {
    initComponent : function(){
        Ext.app.SearchField.superclass.initComponent.call(this);
        this.on('keydown', function(f, e){
        	if(e.getKey() == e.ENTER){
                this.onTrigger2Click();
            }
        }, this);
    },

    validationEvent:false,
    validateOnBlur:false,
    trigger1Class:'x-form-clear-trigger',
    trigger2Class:'x-form-search-trigger',
    hideTrigger1:true,
    width:180,
    hasSearch : false,
    paramNames : {start:"start",limit:"limit",query:'query'},
    enableKeyEvents: true,

    onTrigger1Click : function(){
        if(this.hasSearch){
            this.el.dom.value = '';
            var o = {};
			o[this.paramNames.start]= 0;
            this.store.baseParams = this.store.baseParams || {};
            this.store.baseParams[this.paramNames.query] = '';
            this.store.reload({params:o});
            this.triggers[0].hide();
            this.hasSearch = false;
        }
    },

    onTrigger2Click : function(){
        var v = this.getRawValue();
        if(v.length < 1){
            this.onTrigger1Click();
            return;
        }
        var o = {};
		o[this.paramNames.start]= 0;
        this.store.baseParams = this.store.baseParams || {};
        this.store.baseParams[this.paramNames.query] = v;
        this.store.reload({params:o});
        this.hasSearch = true;
        this.triggers[0].show();
    }
});

后来换了好几个监听键盘的事件发现问题还是没解决,查看EXT API后发现有个属性是可以把默认的事件给去掉的stopEvent();这个方法在Ext.lib.Event,
stopEvent: function(ev) {
                this.stopPropagation(ev);
                this.preventDefault(ev);
            },


            stopPropagation: function(ev) {
                ev = ev.browserEvent || ev;
                if (ev.stopPropagation) {
                    ev.stopPropagation();
                } else {
                    ev.cancelBubble = true;
                }
            },


            preventDefault: function(ev) {
                ev = ev.browserEvent || ev;
                if(ev.preventDefault) {
                    ev.preventDefault();
                } else {
                    ev.returnValue = false;
                }
            },
,我所要关注的就是ev.cancelBubble = true。
    window.event有一个属性叫做cancelBubble:
Boolean that specifies or receives one of the following values.
false
Default. Bubbling is enabled, allowing the next event handler in the hierarchy to  receive the event.
true
Bubbling is disabled for this event, preventing the next event handler in the        hierarchy from receiving the event.
在某些情况下需要屏蔽某些事件的话就可以使用这个属性。
还有就是要在异步事件注册之前就要把键盘监听默认的事件给STOP掉,要不不会起作用
Ext.app.SearchField = Ext.extend(Ext.form.TwinTriggerField, {
    initComponent : function(){
        Ext.app.SearchField.superclass.initComponent.call(this);
        this.on('keydown', function(f, e){
        	if(e.getKey() == e.ENTER){
            	e.stopEvent();
                this.onTrigger2Click();
            }
        }, this);
    },

    validationEvent:false,
    validateOnBlur:false,
    trigger1Class:'x-form-clear-trigger',
    trigger2Class:'x-form-search-trigger',
    hideTrigger1:true,
    width:180,
    hasSearch : false,
    paramNames : {start:"start",limit:"limit",query:'query'},
    enableKeyEvents: true,

    onTrigger1Click : function(){
        if(this.hasSearch){
            this.el.dom.value = '';
            var o = {};
			o[this.paramNames.start]= 0;
            this.store.baseParams = this.store.baseParams || {};
            this.store.baseParams[this.paramNames.query] = '';
            this.store.reload({params:o});
            this.triggers[0].hide();
            this.hasSearch = false;
        }
    },

    onTrigger2Click : function(){
        var v = this.getRawValue();
        if(v.length < 1){
            this.onTrigger1Click();
            return;
        }
        var o = {};
		o[this.paramNames.start]= 0;
        this.store.baseParams = this.store.baseParams || {};
        this.store.baseParams[this.paramNames.query] = v;
        this.store.reload({params:o});
        this.hasSearch = true;
        this.triggers[0].show();
    }
});
0
0
分享到:
评论

相关推荐

    火狐浏览器不支持window.event的解决办法

    火狐浏览器不支持window.event的解决办法,解决不同浏览器针对window.event的差异

    window.event 对象详解

    在JavaScript编程语言中,`window.event`对象是一个特殊对象,它与浏览器的事件处理机制紧密相关。这个对象在大部分浏览器环境中(尤其是老版本的IE)是全局可用的,提供了当前事件的相关信息。本文将深入探讨`...

    Windows Event Log 日志管理工具

    Windows Event Log 日志管理工具,功能包括添加Event Source,添加Event Log,删除Event Source,删除EventLog. 可用于Web项目发布中对自定义日志的管理。 因需要一定系统访问权限,请使用管理员权限登录使用。

    JavaScript bom操作 window-event 示例代码

    JavaScript bom操作 window_event 示例代码JavaScript bom操作 window_event 示例代码JavaScript bom操作 window_event 示例代码JavaScript bom操作 window_event 示例代码JavaScript bom操作 window_event 示例代码...

    [JS]详尽解析window.event对象

    `window.event`对象是JavaScript中一个非常重要的概念,特别是在处理DOM事件时。它代表了当前事件的状态和相关信息,包括触发事件的元素、鼠标位置、按键状态等。在事件发生时,`event`对象会作为参数传递给事件处理...

    window.event.keycode值大全

    ### Window.event.keycode值大全详解 #### 概述 在JavaScript中,`window.event.keycode`属性被用于获取用户按下键的键盘码。这在处理键盘事件时非常有用,可以帮助开发者识别并响应特定的按键操作。本文将详细...

    高手window.event对象详解

    ### 高手window.event对象详解 #### 一、概述 `window.event` 是一个非常重要的JavaScript内置对象,它主要用于处理浏览器中的各种事件。这个对象包含了有关事件的各种信息,例如触发事件的对象、事件类型以及与该...

    window对象--event对象详解

    在深入讲解Window对象和Event对象之前,我们先了解一些基础概念。JavaScript是一种基于原型的动态类型语言,它广泛用于Web开发,提供了与HTML和CSS交互的能力。在浏览器环境中,Window对象是全局作用域的,这意味着...

    火狐下window.event回车改Tab解决方案

    例如,在Internet Explorer(IE)浏览器中,可以直接通过`window.event`来获取当前触发事件的信息;而在其他非IE浏览器(如Firefox)中,则需要通过其他方式来获取事件对象。这导致了在编写跨浏览器兼容性良好的代码...

    Jna读取本地windows event实例

    针对现如今最新版JNA读取本地window event的实例 供参考

    javascript中window.event事件用法详解

    window.event对象是JavaScript中一个特殊的对象,它代表当前发生的事件的状态,包括触发事件的元素、鼠标位置和按键状态等信息。window.event对象仅在事件处理函数运行期间有效,因此它是事件处理函数的局部变量。每...

    WPF WEBROWSER EVENT NEWWINDOW

    WPF WEBROWSER EVENT NEWWINDOW

    网页右键ie不支持event.preventDefault和event.returnValue (需要加window)

    因此,在非IE浏览器中,我们通常通过参数`event`来访问事件对象,而在IE中则需要直接使用`window.event`。 总的来说,对于需要跨浏览器兼容的项目,我们需要考虑到不同浏览器对事件处理机制的支持差异。在处理右键...

    替代window.event.srcElement效果的可兼容性的函数

    在JavaScript编程中,特别是在处理事件时,`window.event` 是一个内置对象,它提供了与当前事件相关的各种信息,如事件的目标元素(`event.srcElement` 在IE中,`event.target` 在非IE浏览器中)。然而,`window....

    window.event快达到全浏览器支持了,以后使用就方便了

    在JavaScript的世界里,`window.event` 是一个与事件处理程序相关的全局属性,主要在Internet Explorer浏览器中被广泛使用。这个属性允许开发者在事件处理函数中访问当前发生的事件对象,而无需通过参数传递。然而,...

    onunload事件判断浏览器是刷新还是关闭窗口

    我们可以使用 onunload 事件和 event.clientX、event.clientY 属性或 window.event.screenX、window.event.clientY 属性来判断浏览器是刷新还是关闭窗口,这样我们可以执行相应的操作,提高用户体验。 在实际应用中...

    window.event.srcElement 得到事件源对象

    event对象指当前触发的事件对象, window.event.srcElement是指触发事件的对象。比如你设定[removed] = myfunc;这时所有页面点击的事件都交给myfunc处理,在myfunc函数里可以写vSrc = window.event.srcElement,知道

    window.event.keyCode兼容IE和Firefox实现js代码

    input type=”text” onkeydown=”keyNumAll... evt : ((window.event) ? window.event : “”); var key = evt.keyCode?evt.keyCode:evt.which;//兼容IE和Firefox获得keyBoardEvent对象的键值 console.info(key);/

Global site tag (gtag.js) - Google Analytics