焦点触发的模糊事件

问题描述

我正在使用以下代码jsFiddle:

function Field(args) {
    this.id = args.id;

    this.name = args.name ? args.name : null;
    this.reqType = args.reqType ? args.reqType : null;
    this.reqUrl = args.reqUrl ? args.reqUrl : null;
    this.required = args.required ? true : false;
    this.error = args.error ? args.error : null;

    this.elem = document.getElementById(this.id);
    this.value = this.elem.value;

    this.elem.addEventListener('blur', this, false);
    this.elem.addEventListener('focus', this, false);
}

// FormTitle is the specific field like a text field. There could be many of them.
function FormTitle(args) {
    Field.call(this, args);
}

Field.prototype.getValue = function() { return Helpers.trim( this.value ) };

Field.prototype.blur = function (value) {
    alert("blur");  
};

Field.prototype.focus = function (value) {
    alert("focus");  
};

Field.prototype.handleEvent = function(event) {
    var prop = event.type;
    if ((prop in this) && typeof this[prop] == "function")
        this[prop](this.value);
};

inheritPrototype(FormTitle, Field);
var title = new FormTitle({name: "sa", id: "title"});

function inheritPrototype(e, t) {
    var n = Object.create(t.prototype);
    n.constructor = e;
    e.prototype = n
}

if (!Object.create) {
    Object.create = function (e) {
        function t() {}
        if (arguments.length > 1) {
            throw new Error("Object.create implementation only accepts the first parameter.")
        }
        t.prototype = e;
        return new t
   }
}

问题是每次使该字段成为焦点时都会触发模糊"事件，这与您的预期相反.尽管代码中甚至没有提到焦点事件，但这是事实.问题是我无法在 jsFiddle 中复制此问题，但问题发生在 IE 中.

The problem is that the 'blur' event is fired every time the field is brought to focus, which is opposite of what you'd expect. This is despite the fact that the focus event isn't even mentioned in the code. The problem is that I cannot replicate this problem in jsFiddle but the problem is happening in IE.

另外，在 jsFiddle 上，还有一个问题.多次触发焦点事件...

Also, on jsFiddle, there is another problem. The focus event is triggered multiple times...

对此有可能的解释和/或解决方案吗?

Is there a possible explanation for this and/or a solution?

奖金问题(最后是这个，承诺).我添加了一个函数 addEvent 来动态地将事件添加到表单字段，而不是直接在父构造函数中添加它们.这就是它的 jsFiddle.我正在尝试调用该函数，但它似乎不起作用.我可能做错了什么?

Bonus question (and last on this, promise). I added a function addEvent to dynamically add events to form fields instead of adding them all directly in the parent constructor. This is the jsFiddle for it. I am trying to call the function but it doesn't seem to work. What might I be doing wrong?

推荐答案

您的 focus 处理程序中的 alert 在获得焦点后立即将焦点从字段中移除.失去焦点会触发 blur.奇怪的是 blur 先出现.

The alert in your focus handler immediately removes focus away from the field as soon as it gains focus. The loss of focus triggers the blur. It is odd that the blur comes first.

如果您将警报更改为 console.log(或不会窃取焦点的内容)，您将看到事件正确触发.

If you change the alerts to console.log (or something that does not steal focus), you will see that the events fire correctly.

http://jsfiddle.net/rsKQq/4/

这篇关于焦点触发的模糊事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！