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>
Adam
  • 25,960
  • 22
  • 158
  • 247
  • 1
    Can not replicate in FF 39.0.3, OS X 10.11. – Oka Mar 08 '16 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. – Frédéric Hamidi Mar 08 '16 at 15:12
  • @Oka you need to select the button before hitting enter. – Adam Mar 08 '16 at 15:14
  • 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 08 '16 at 15:14
  • @j08691 yes your right, I adjusted the question – Adam Mar 08 '16 at 15:17
  • I am using Firefox 44.0.2 and I see a red box, I see a change color button - I click the button, box changes to red. I click it again, it changes to green. Based on how I read the code, it works as expected and I don't see any issue. Based on other comments above, *I think the question is incorrectly written. Please explain what you expect to happen, and any errors you get...* –  Mar 08 '16 at 15:21
  • @fiprojects I expect that the div only changes its color if I click on it with my mouse courser. I don't understand why the div also changes its color if I select it and press return or spacebar. I think my question is not incorrectly written after I edited according to j08691 suggestion. – Adam Mar 08 '16 at 15:23
  • @fiprojects - OP wants to know why the *click* event is triggered when you focus on the button with your tab key and press the spacebar or enter. – j08691 Mar 08 '16 at 15:24
  • 1
    Possible duplicate of [Spacebar triggering click event on checkbox?](http://stackoverflow.com/questions/27878940/spacebar-triggering-click-event-on-checkbox) – KWeiss Mar 08 '16 at 15:24
  • From the other question: "The click event fires when the user clicks on an element OR activates an element by other means (i.e. the keyboard) ... “click” event is really a misnomer: it should be called the “activate” event.". The jQuery documentation is wrong. – KWeiss Mar 08 '16 at 15:26
  • jQuery API is correct, if mouse button is depressed while the pointer is inside the element and now if you scroll the mouse somewhere else i.e. outside the element and then release the mouse button click event won't be triggered. API also say: This is usually the desired sequence before taking an action. If this is not required, the mousedown or mouseup event may be more suitable. – msapkal Mar 08 '16 at 15:31
  • @KWeiss, does it mean that in any browser the click event is triggerd by return key? – Adam Mar 08 '16 at 15:31
  • 3
    yes, it's part of w3c standards: http://www.w3.org/TR/WCAG20-TECHS/SCR35 – KWeiss Mar 08 '16 at 15:33
  • 1
    @MaheshSapkal the jQuery API is wrong, because it states that the event is only triggerd by the mouse curser, but you can obviously also trigger with return. – Adam Mar 08 '16 at 15:34
  • 1
    Could replicate in Firefox 38 and chrome 25. Jquery docs seem to be in the wrong here. They seem to have missed this in their explanation of when the click event is fired. Nice find btw, it's good to have this in mind. – Sebastianb Mar 08 '16 at 15:38

1 Answers1

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.

KWeiss
  • 2,954
  • 3
  • 21
  • 37