Listing 3.13: Stop propagation.

Chapter 3/03.js

@@ -1,29 +1,37 @@
 $(document).ready(function () {
   'use strict';
 
-  $('#switcher')
-    .hover(
-      function () { $(this).addClass('hover'); },
-      function () { $(this).removeClass('hover'); })
-    .click(function (event) {
-      if (event.target === this) {
-        $('#switcher button').toggleClass('hidden');
-      }
-    });
-
-    $('#switcher-default').addClass('selected');
+  $('#switcher h3').hover(
+    function () { $(this).addClass('hover'); },
+    function () { $(this).removeClass('hover'); }
+  );
+});
+
+$(document).ready(function () {
+  'use strict';
+
+  $('#switcher').click(function (event) {
+    $('#switcher button').toggleClass('hidden');
+  });
+});
+
+$(document).ready(function () {
+  'use strict';
+
+  $('#switcher-default').addClass('selected');
 
   // Automatic handler names available for (jQuery 1.9.0):
   // blur focus focusin focusout load resize scroll unload click dblclick.
   // mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave
   // change select submit keydown keypress keyup error contextmenu.
-  $('#switcher button').click(function () {
+  $('#switcher button').click(function (event) {
     var bodyClass = this.id.split('-')[1];
 
     $('body').removeClass().addClass(bodyClass);
 
     $('#switcher button').removeClass('selected');
     $(this).addClass('selected');
+    event.stopPropagation();
   });
 
 });