Question

Having this sample code:

<input type="text" id="changeid">
<a href="#" id="clickb">click</a>

<script>
    $('#clickb').on("click", function(event){
        alert(1);                             
        return false;
    });

    $('#changeid').on("change", function(event){
        alert(2);                             
        return false;
    });
</script>

When putting something into the text field and click the link immediately, only onchange event fires, but not link click event.
Why is that?
It seems that the change event is blocking the click event?

Answer 1

When you edit the input and then click on the link the following happens on the inside

1. You start clicking on the ‘link’. No events are generated yet (not even mousedown), because first the browser will do some cleanup work:
2. The input loses focus and will raise a blur event
3. The input raises a change event, since it raised a blur and the value changed
4. Your change event callback opens an alert(2)
5. The documents loses focus since a new window appeared
6. The link will never experience the click.

The solution is not to use alert (as xdazz proposed).