Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.5k views
in Technique[技术] by (71.8m points)

javascript - Blur event triggered on focus

I am using the following code 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
   }
}

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.

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?

Updated:

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.

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/


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...