/mootools/mootools-core/issues/2170
This problem comes from the implementation of checkbox and radio change events in IE (LTE8). After testing in IE (LTE8), when you click on a checkbox or radio, its change event will not be triggered immediately unless you make it lose focus. In other standard browsers (including IE9), the change event is triggered immediately after clicking. This is indeed a painful problem. Speaking of the solution, it is relatively easy. Using the propertychange event unique to the elements in IE (LTE8) can avoid the above problems (IE9 no longer has this thing), such as:
('onpropertychange', function() {
('hey man, I am changed');
});
But this is considered to be inadequate to consider that a solution is insufficient, because operations like ('data-value', 'god') will also trigger its propertychange event, so we need to use it to judge, such as:
('onpropertychange', function() {
if( == 'checked')
('blah blah blah...');
});
This is OK. From this, I tested the select again. The change event is consistent in different browsers, and there is no situation where you have to lose focus first. I tested input[type="text"] again. Its change event is familiar to us and will only trigger if it loses focus. So when we want it to trigger it as soon as it enters something, refer to the previous example in IE (LTE8), we can use propertychange to implement it, but the condition of propertyName becomes 'value'. In other standard browsers (including IE9), we can use a standard event input in HTML5, such as:
('input', function(event) {
('input event fired');
}, false);
In this way, every time we input, this event will be triggered. Some people will ask why not use keyup to listen. There is an article (original link) here explains this issue. Those who are interested can read it.
This problem comes from the implementation of checkbox and radio change events in IE (LTE8). After testing in IE (LTE8), when you click on a checkbox or radio, its change event will not be triggered immediately unless you make it lose focus. In other standard browsers (including IE9), the change event is triggered immediately after clicking. This is indeed a painful problem. Speaking of the solution, it is relatively easy. Using the propertychange event unique to the elements in IE (LTE8) can avoid the above problems (IE9 no longer has this thing), such as:
Copy the codeThe code is as follows:
('onpropertychange', function() {
('hey man, I am changed');
});
But this is considered to be inadequate to consider that a solution is insufficient, because operations like ('data-value', 'god') will also trigger its propertychange event, so we need to use it to judge, such as:
Copy the codeThe code is as follows:
('onpropertychange', function() {
if( == 'checked')
('blah blah blah...');
});
This is OK. From this, I tested the select again. The change event is consistent in different browsers, and there is no situation where you have to lose focus first. I tested input[type="text"] again. Its change event is familiar to us and will only trigger if it loses focus. So when we want it to trigger it as soon as it enters something, refer to the previous example in IE (LTE8), we can use propertychange to implement it, but the condition of propertyName becomes 'value'. In other standard browsers (including IE9), we can use a standard event input in HTML5, such as:
Copy the codeThe code is as follows:
('input', function(event) {
('input event fired');
}, false);
In this way, every time we input, this event will be triggered. Some people will ask why not use keyup to listen. There is an article (original link) here explains this issue. Those who are interested can read it.