1

In the jQuery API it states

The click event is only triggered after this exact series of events:

  1. The mouse button is depressed while the pointer is inside the element.
  2. The mouse button is released while the pointer is inside the element.

However, I just noticed that in Firefox 39 the event is also triggerd when I select an input button element and then press return or the spacekey. Why is that? are there also other events that trigger the click event?

Here is an example, see the jFiddle. If I press the button with the mouse it changes the color as expected. But it also changes the color if I select the button and press return or spacekey.

<style>
div{
  width: 200px;
  height: 200px;
  background-color: green;
}

.red{
  background-color: red;
}
</style>

<input type='button' class='button' value='change color'>
<div></div>

<script>
$(document).ready(function(){
      $('.button').click(function(e){    
        $('div').toggleClass('red');
      });
});
</script>
15
  • 1
    Can not replicate in FF 39.0.3, OS X 10.11.
    – Oka
    Mar 8, 2016 at 15:10
  • 3
    Could replicate on Firefox 44.0.2. When the button has focus, both the Enter and Space keys generate a click event. I believe it's by design, since hitting those keys will activate the button, and it allows to bind a single handler to the activation. Mar 8, 2016 at 15:12
  • 1
    Are you asking why selecting the button with the keyboard first and hitting enter triggers the click event? In your question you say, "the event is only triggerd when I press return". Are you sure that's the only time?
    – j08691
    Mar 8, 2016 at 15:14
  • 1
    Possible duplicate of Spacebar triggering click event on checkbox?
    – KWeiss
    Mar 8, 2016 at 15:24
  • 3
    yes, it's part of w3c standards: w3.org/TR/WCAG20-TECHS/SCR35
    – KWeiss
    Mar 8, 2016 at 15:33

1 Answer 1

2

The jQuery API documentation is misleading. The process it describes is the only way to trigger the click event with the mouse or other pointer device. The W3C recommends that browsers trigger the onclick event when the element is in focus and certain keyboard inputs happen. The reason for this recommendation is increased accessibility.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.