Why Internet Explorer checkbox accepts double clic

问题:

In Internet Explorer (any version) if you click twice fast a checkbox it changes only once. Another browsers don't do this.

This is "by design" or a very strange behavior(bug)?

回答1:

While I was working as system administrator in many different companies I've oftentimes seen people using doubleclick as default action to interact with any UI element. The first thing they learned about Windows, is that doubleclick launches an icon (shortcut). And they apply this knowledge to every other elements, no matter what it actually is: link, button, icon or checkbox =) So, I suppose it made deliberately, that IE counts doubleclick as singleclick.

回答2:

Workaround / Solution

Using jQuery i fixed the problem like this:

this.checkboxes = $('input[type="checkbox"]');
if (navigator.userAgent.match(/MSIE/i)){
        this.checkboxes.dblclick(function() {
            if($(this).prop('checked')) {                       
                $(this).prop('checked', false);
            } else {
                $(this).prop('checked', true);
            }
        });
}
this.checkboxes.click(function(e) {                 
    // do whatever a click should do                                        
});

Explanation: On a double click in Internet Explorer, the events are fired like this:

1. Click
2. Click
3. Double Click

On a double click, the desired action in my click event happened twice (like it should), but the checkbox did not change states twice. So i simply toggled the checked/unchecked-state again when a double click fires. As this would break functionality in Firefox/Chrome/etc, i only used it in MSIE (Internet Explorer) user agents.

With the code above, the events and checkbox-states fire/change like this:

Double Click in All Browsers except IE:

1. Click (change state, fire click event)
2. Click (change state, fire click event)

Double Click on a checkbox in Internet Explorer

1. Click (change state, fire click event)
2. Click (fire click event)
3. Double Click (change state (via double click event))

回答3:

This seems to be a general bug in IE that applies not just to checkboxes, but click-handling in general. Looks like it will be fixed in IE9 Platform Preview 4:

http://webbugtrack.blogspot.com/2008/01/bug-263-beware-of-doubleclick-in-ie.html

回答4:

The below code works for me:

<input type="checkbox"  OnClick ="javascript:toggleGetSelected(this)">

var temp;
function toggleGetSelected(e){
        if(e){

            // Below is the if condition which handles the double click
            if(e.checked==true && temp==e.value ){
                  e.checked=false;
            }
            // ends double click handle


            if(e.checked==true){
                temp=e.value;
                // your code here                       
            }
            else{
                temp=null;
                // your code here           
            }

      }
}