在 jQuery .live() 方法中模拟“焦点”和“模糊”

IT技术 javascript jquery
2021-03-08 18:43:23

更新：从 jQuery 1.4 开始，$.live()现在支持focusin和focusout事件。

jQuery当前1不支持“模糊”或“焦点”作为$.live()方法的参数。我可以实施什么类型的解决方法来实现以下目标：

$("textarea")
  .live("focus", function() { foo = "bar"; })
  .live("blur",  function() { foo = "fizz"; });

1 . 2009 年 7 月 29 日，版本 1.3.2

6个回答

工作解决方案：

(function(){

    var special = jQuery.event.special,
        uid1 = 'D' + (+new Date()),
        uid2 = 'D' + (+new Date() + 1);

    jQuery.event.special.focus = {
        setup: function() {
            var _self = this,
                handler = function(e) {
                    e = jQuery.event.fix(e);
                    e.type = 'focus';
                    if (_self === document) {
                        jQuery.event.handle.call(_self, e);
                    }
                };

            jQuery(this).data(uid1, handler);

            if (_self === document) {
                /* Must be live() */
                if (_self.addEventListener) {
                    _self.addEventListener('focus', handler, true);
                } else {
                    _self.attachEvent('onfocusin', handler);
                }
            } else {
                return false;
            }

        },
        teardown: function() {
            var handler = jQuery(this).data(uid1);
            if (this === document) {
                if (this.removeEventListener) {
                    this.removeEventListener('focus', handler, true);
                } else {
                    this.detachEvent('onfocusin', handler);
                }
            }
        }
    };

    jQuery.event.special.blur = {
        setup: function() {
            var _self = this,
                handler = function(e) {
                    e = jQuery.event.fix(e);
                    e.type = 'blur';
                    if (_self === document) {
                        jQuery.event.handle.call(_self, e);
                    }
                };

            jQuery(this).data(uid2, handler);

            if (_self === document) {
                /* Must be live() */
                if (_self.addEventListener) {
                    _self.addEventListener('blur', handler, true);
                } else {
                    _self.attachEvent('onfocusout', handler);
                }
            } else {
                return false;
            }

        },
        teardown: function() {
            var handler = jQuery(this).data(uid2);
            if (this === document) {
                if (this.removeEventListener) {
                    this.removeEventListener('blur', handler, true);
                } else {
                    this.detachEvent('onfocusout', handler);
                }
            }
        }
    };

})();

在 IE/FF/Chrome 中测试。应该完全按照您的预期工作。

更新：拆解现在有效。

是的，我认为是这样……jQuery 在后台处理了大部分工作（包括“处理”）。刚刚更新了拆解，以便分离适当的事件。
2021-04-28 18:43:23
你如何使用这个功能？
2021-04-29 18:43:23
会die()路由到teardown这里吗？
2021-05-02 18:43:23
非常感谢。完美解决了我遇到的一个问题。
2021-05-07 18:43:23
现在转到 jQuery 错误跟踪器并提供补丁。做得好。
2021-05-18 18:43:23

此功能现在包含在 jQuery 核心中（从 1.4.1 开始）。

live()是 jQuery事件委托的快捷方式。要回答您的问题，请参阅委派焦点和模糊事件。

这非常巧妙：对于符合标准的浏览器，他使用事件捕获来捕获这些事件。对于 IE，他使用 IE 专有的focusin(for focus) 和focusout(for blur) 事件，它们会冒泡，允许传统的事件委托。

我将把它移植到 jQuery 作为练习。

端口是否:)（见我的回答）
2021-05-01 18:43:23

它们已添加到 jquery 1.4.1 ... 现在 .live() 函数支持 fucus 和模糊事件 =) 问候

看起来问题是在检查 event.type 时它返回“focusin”和“focusout”

$('input').live("focus blur", function(event){
    if (event.type == "focusin") {
        console.log(event.type);
    }else{
        console.log(event.type);
    }
});
其它你可能感兴趣的问题
上一篇如何使图像仅在视口中时才延迟加载？ 下一篇从 UIWebView 中的 javascript 向 ObjectiveC 发送通知