Use preventDefault()/stopPropagation(). Add false to addEventListener().
authorOleksandr Gavenko <gavenkoa@gmail.com>
Wed, 17 Sep 2014 19:46:04 +0300
changeset 65 b8028f3e30fb
parent 64 96e997158562
child 66 c62a1051cef7
Use preventDefault()/stopPropagation(). Add false to addEventListener(). Remove "return false" from addEventListener() callback.
2048.html
--- a/2048.html	Mon Sep 15 21:19:37 2014 +0300
+++ b/2048.html	Wed Sep 17 19:46:04 2014 +0300
@@ -262,10 +262,11 @@
     ui.board = {};
     ui.board.val2048Dom = document.getElementById('2048');
     ui.board.val2048Dom.addEventListener("click", function(event) {
+      event.preventDefault(); event.stopPropagation();
       ui.board.update(ui.board.position);
       localStorage.val2048 = ui.board.val2048Dom.checked;
       event.target.blur();
-    });
+    }, false);
     ui.board.val2048 = function(val) {
       if (ui.board.val2048Dom.checked)
         return Math.pow(2, val);
@@ -304,10 +305,10 @@
         inputDom.select();
         inputDom.addEventListener("blur", function(tdDom, i, j) {
           return function(event) {
+            event.preventDefault(); event.stopPropagation();
             ui.board.handleEdit(tdDom, i, j);
-            return false;
           }
-        }(tdDom, i, j));
+        }(tdDom, i, j), false);
       } else {
         var inputDom = tdDom.firstChild;
         var val = parseInt(inputDom.value);
@@ -327,16 +328,17 @@
           var tdDom = tdDoms[j];
           tdDom.addEventListener("click", function(tdDom, i, j) {
             return function(event) {
+              event.preventDefault(); event.stopPropagation();
               ui.board.handleEdit(tdDom, i, j);
-              return false;
             }
-          }(tdDom, i, j));
+          }(tdDom, i, j), false);
           tdDom.addEventListener("keyup", function(tdDom, i, j) {
             return function(event) {
+              event.preventDefault(); event.stopPropagation();
               if (event.keyCode === 13)
                 ui.board.handleEdit(tdDom, i, j);
             }
-          }(tdDom, i, j));
+          }(tdDom, i, j), false);
         }
       }
     }
@@ -446,12 +448,13 @@
       board.putRandom(ui.board.position);
       ui.board.update(ui.board.position);
     }
-    document.getElementById("start").addEventListener("click", ui.action.start);
+    document.getElementById("start").addEventListener("click", ui.action.start, false);
 
     for (var i = 0; i < ui.game.dirs.length; i++) {
       var dir = ui.game.dirs[i];
       ui.action[dir] = function(dir) {
-        return function() {
+        return function(event) {
+          event.preventDefault(); event.stopPropagation();
           if (ui.game.checkGameOver())
             return;
           ui.suggestion.clear();
@@ -462,7 +465,7 @@
           }
         }
       } (dir);
-      document.getElementById(dir).addEventListener("click", ui.action[dir]);
+      document.getElementById(dir).addEventListener("click", ui.action[dir], false);
     }
 
     document.body.addEventListener("keydown", function(event) {
@@ -473,16 +476,17 @@
       var key = event.keyCode || event.which;
       var keyMoves = {38: "up", 40: "down", 37: "left", 39: "right"};
       if (key in keyMoves) {
-        ui.action[keyMoves[key]]();
-        event.preventDefault();
+        ui.action[keyMoves[key]](event);
       }
-    });
+    }, false);
 
     document.getElementById("test").addEventListener("click", function() {
+      event.preventDefault(); event.stopPropagation();
       board.move.replaceByBoardJS(ui.brdEngine);
-    });
+    }, false);
 
-    ui.action.suggest = function() {
+    ui.action.suggest = function(event) {
+      event.preventDefault(); event.stopPropagation();
       if ( ! ui.ai.current) {
         ui.game.setMessage('Select AI!');
         return;
@@ -497,7 +501,7 @@
         return;
       ui.suggestion.set(move);
     }
-    document.getElementById("suggest").addEventListener("click", ui.action.suggest);
+    document.getElementById("suggest").addEventListener("click", ui.action.suggest, false);
     ui.action.step = function() {
       if ( ! ui.ai.current) {
         ui.game.setMessage('Select AI!');
@@ -514,7 +518,7 @@
       board.move[move].call(null, ui.board.position);
       ui.game.finishStep();
     }
-    document.getElementById("step").addEventListener("click", ui.action.step);
+    document.getElementById("step").addEventListener("click", ui.action.step, false);
 
     ui.action.finish = function() {
       if ( ! ui.ai.current) {
@@ -548,7 +552,7 @@
       ui.game.setMessage("Game over!");
       ui.ai.current && ui.ai.current.cleanup();
     }
-    document.getElementById("finish").addEventListener("click", ui.action.finish);
+    document.getElementById("finish").addEventListener("click", ui.action.finish, false);
 
     ////////////////////////////////////////////////////////////////
     // Register AIs.
@@ -605,7 +609,7 @@
     for (var i = 0; i < ui.ai.domList.length; i++) {
       ui.ai.domList[i].querySelectorAll('button.ai')[0].addEventListener("click", function (event) {
         ui.ai.enable(event.target.parentNode);
-      });
+      }, false);
     }
 
     ui.ai.moveToTop = function(aiDom) {
@@ -669,7 +673,7 @@
     }
 
     var statisticBtn = document.getElementById('statistic');
-    statisticBtn.addEventListener("click", statistic);
+    statisticBtn.addEventListener("click", statistic, false);
 
 
     ////////////////////////////////////////////////////////////////