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]

Comments

  1. Johnies says:

    Wow… you saved me day. I needed that script to stop the onbeforeUnload event
    Thanks

    • bySergio says:

      Hi, I try this script, but it don’nt works … Please, could’you send me your script ?

  2. eldhose says:

    very very thanks buddy

Trackbacks

  1. […] https://webdevelopment2.com/the-secret-of-cancelling-and-stopping-events-using-javascript/ Possibly related posts: (automatically generated)More JavaScript Event Listener Memory Leak PreventionThank You, W3Schools […]