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

【问题标题】：Simulating "focus" and "blur" in jQuery .live() method在 jQuery .live() 方法中模拟“焦点”和“模糊”
【发布时间】：2009-07-29 10:33:25
【问题描述】：

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

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

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

^{1。 2009 年 7 月 29 日，版本 1.3.2}

【问题讨论】：

$('textarea').bind('focus') 有效...在您的代码示例中，您的意思不是“live()”吗？？

标签： javascript jquery

【解决方案1】：

工作解决方案：

(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 错误跟踪器并提供补丁。干得好。
将die() 路由到teardown 这里吗？
是的，我想是的...... jQuery 在后台处理了大部分工作（包括“处理”）。刚刚更新了拆解，以便分离适当的事件。
非常感谢。完美解决了我遇到的问题。
这个功能怎么用？

【解决方案2】：

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

【讨论】：

【解决方案3】：

live() 是 jQuery 对event delegation 的快捷方式。要回答您的问题，请参阅Delegating the focus and blur events。

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

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

【讨论】：

做了端口:)（见我的回答）

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

$('input').live("focus blur", function(event){
    if (event.type == "focusin") {
        console.log(event.type);
    }else{
        console.log(event.type);
    }
});

【讨论】：

【解决方案6】：

再补充：本方案不支持多个参数。

我试过了：

$(el).live("focus blur",  function(e) {
  if (e.type == "focus") {

等等

它只触发了模糊事件。

尽管如此，这个解决方案还是很有帮助的。

【讨论】：