The Secret of Cancelling and Stopping Events using JavaScript

Introduction

Back when I was doing my internship we had a major problem we were trying to solve. The project involved creating a web based terminal emulator using AJAX. Well, it was a little bit more specific than that. It was basically duplicating a specific application in the browser window.

Problem

Sounds all well and good except that this application made heavy use of F Keys, e.g. (F10, F5, F1, etc). Needless to say this would not really be viable in a browser since F1 would call up help, F5 would refresh and F10 would send the cursor to the menu. We had already written a nice enough key handler that worked rather well, with the exception of these F Keys.

JavaScript Solution

After a lot of hacking around I found a way to stop the browser from calling up and propagating those events. My code was, for lack of a better word, nasty; but it did work. It involved a lot of IE/Mozilla workarounds. I recently came across some cleaner code, so here you go:

function stopEvent(e) {
    if (!e) e = window.event;
    if (e.stopPropagation) {
        e.stopPropagation();
    } else {
        e.cancelBubble = true;
    }
}

and

function cancelEvent(e) {
    if (!e) e = window.event;
    if (e.preventDefault) {
        e.preventDefault();
    } else {
        e.returnValue = false;
    }
}

Explanation

stopEvent, well stops the event. Seriously, it stops the event from being called by other background elements. Many elements may use the same event called by just one. So stopping it here ensures that it doesn’t propagate to the background elements. cancelEvent squashes the browser’s default behavior.

source Ajax Cookbook

[tags]ajax, browser, firefox, ie, javascript[/tags]