onclick event not firing after onchange event

javascript

Solution

The problem is that the `alert()` function grabs the event chain somehow, test this:

<html>
<body>
    <input type="text" name="test" id="test1" onchange="return change(event);" />
    <a href="#" id="test2" onclick="return bang();">Bang</a> <a href="#" id="test3" onclick="return boom();">Boom</a>
    <script type="text/javascript">
        function change(event) {
          console.log("change");
            return true;
        }  

        function bang() {
            console.log("bang");
            return true;
        }

        function boom() {
            console.log("boom");
            return true;
        }
    </script>
</body>

As you'll see you'll get the expected behaviour in the console.

JSBin

Problem

Does anyone know how to make a simple JavaScript `onclick` event fire if the process of clicking the element causes an onchange event to fire elsewhere on the page? I've created a very simple page to demonstrate this problem: ``` <html> <body> <input type="text" name="test" id="test1" onchange="return change(event);" /> <a href="#" id="test2" onclick="return bang();">Bang</a> <a href="#" id="test3" onclick="return boom();">Boom</a> <script type="text/javascript"> function change(event) { alert("Change"); return true; } function bang() { alert("Bang!"); return true; } function boom() { alert("Boom!"); return true; } </script> </body> </html> ``` If you click the bang link you get the Bang! alert. Boom gives you the Boom alert. And if you enter text in the text field and tab out you get the Change alert. All well and good. However, if you enter text in the text field and, without tabbing or clicking anything else first, click either Bang or Boom you get the Change alert and nothing else. I would expect to see the Change alert followed by either Bang or Boom. What's going on here? My change event returns true. How can I ensure that my click event is fired?

Original source