JavaScript Event cancelable Property: Understanding Event Cancellation

The JavaScript cancelable property of an Event object is a boolean value that indicates whether a specific event can be canceled, preventing its default action. Not all events are cancelable; for instance, the scroll event cannot be canceled, but a submit event, or keydown event in many cases, can be. This property is crucial for creating interactive and controlled web experiences.

What is Event Cancellation?

Event cancellation means preventing the browser from performing its default action associated with an event. For example, if a user clicks a submit button within a form, the default action is to submit the form. Using the preventDefault() method, along with checking if the event cancelable is true, allows JavaScript to prevent this default form submission.

Purpose of the cancelable Property

The main purpose of the cancelable property is to:

• Indicate whether an event is cancelable. This allows developers to programmatically check if they can prevent the default behavior.
• Provide a mechanism to control event behavior. By checking cancelable and using preventDefault(), developers can customize the browser’s response to user actions.
• Enhance interactivity and flexibility. It enables creation of web applications that react to user input in a controlled and predictable manner.

Syntax

The syntax for accessing the cancelable property is straightforward:

event.cancelable;

Where event is an Event object passed to an event listener function. The property returns a boolean value:

• true: The event is cancelable, and its default action can be prevented using the preventDefault() method.
• false: The event is not cancelable, and calling preventDefault() will have no effect.

Using the cancelable Property with preventDefault()

The cancelable property is commonly used in conjunction with the preventDefault() method. Before calling preventDefault(), it’s crucial to check whether the event is cancelable. This prevents errors and ensures code runs smoothly in different scenarios.

Here’s how to use it in practice:

element.addEventListener('event_type', function(event) {
  if(event.cancelable){
    event.preventDefault();
  }
});

Important Notes

• Not all events are cancelable. It’s crucial to check the cancelable property before attempting to prevent the default action.
• preventDefault() only works if event.cancelable is true.
• preventDefault() stops the browser from executing its default behavior but doesn’t stop event propagation.

Examples

Let’s explore some practical examples to illustrate how the cancelable property works.

Example 1: Preventing Form Submission

In this example, we’ll prevent the default submission of a form. We’ll check if the submit event is cancelable before preventing the default action.

<form id="myForm1">
  <input type="text" placeholder="Enter text" />
  <button type="submit">Submit</button>
</form>
<div id="message1"></div>

<script>
    const form1 = document.getElementById('myForm1');
    const messageDiv1 = document.getElementById('message1');

    form1.addEventListener('submit', function(event) {
      if (event.cancelable) {
          event.preventDefault();
          messageDiv1.textContent = 'Form submission prevented!';
      } else {
          messageDiv1.textContent = 'Form submission cannot be prevented!';
      }
    });
</script>

Output:

When you click the “Submit” button, the form will not submit, and a message “Form submission prevented!” will be displayed. If the event.cancelable was false, it would output “Form submission cannot be prevented!”.

Example 2: Preventing Link Navigation

Here, we’ll prevent the default navigation of a link (<a> tag) if the click event is cancelable.

<a id="myLink2" href="https://www.example.com">Visit Example</a>
<div id="message2"></div>
<script>
  const link2 = document.getElementById('myLink2');
  const messageDiv2 = document.getElementById('message2');

  link2.addEventListener('click', function(event) {
    if (event.cancelable) {
        event.preventDefault();
        messageDiv2.textContent = 'Link navigation prevented!';
    } else {
       messageDiv2.textContent = 'Link navigation cannot be prevented!';
    }
  });
</script>

Output:

When you click the link, the navigation will be prevented, and the message “Link navigation prevented!” will appear on the page. Again, if event.cancelable was false it would show “Link navigation cannot be prevented!”

Example 3: Observing a Non-Cancelable Event

The scroll event is not cancelable. We’ll demonstrate that trying to prevent the default action of a scroll event will not work.

<div id="scrollableDiv3" style="height: 100px; overflow: auto; border: 1px solid black;">
  <div style="height: 300px;">Scroll Me</div>
</div>
<div id="message3"></div>
<script>
  const scrollDiv3 = document.getElementById('scrollableDiv3');
  const messageDiv3 = document.getElementById('message3');

  scrollDiv3.addEventListener('scroll', function(event) {
     if (event.cancelable) {
         event.preventDefault();
         messageDiv3.textContent = 'Scroll was prevented (This will not appear).';
      } else {
        messageDiv3.textContent = 'Scroll event cannot be prevented.';
      }
  });
</script>

Output:

When you scroll the div, the text “Scroll event cannot be prevented.” will be displayed and no scrolling will be blocked as the event cancelable is false.

Example 4: Cancelling a keydown event

Some keyboard events, like keydown, are cancelable depending on the key and the focus. This example demonstrates how to prevent the default action of pressing the ‘A’ key in an input field.

<input type="text" id="myInput4" placeholder="Type here"/>
<div id="message4"></div>
<script>
  const input4 = document.getElementById('myInput4');
  const messageDiv4 = document.getElementById('message4');

  input4.addEventListener('keydown', function(event) {
    if(event.key === 'a' && event.cancelable) {
      event.preventDefault();
      messageDiv4.textContent = 'Typing "a" prevented!'
    } else if (event.key === 'a' && !event.cancelable) {
       messageDiv4.textContent = 'Typing "a" cannot be prevented in this context!';
    }else {
       messageDiv4.textContent = 'Type something else';
    }
  });
</script>

Output:

When you focus the input and press the ‘a’ key, no “a” will be displayed in the input, and the message “Typing “a” prevented!” will be shown. Typing other keys will not be prevented, and “Type something else” message will be displayed. If the cancelable property was false (such as in some contexts like composing characters for different languages), it will output “Typing “a” cannot be prevented in this context!”.

Browser Support

The cancelable property is supported in all modern browsers, ensuring consistent behavior across different environments.

Browser	Version
Chrome	1+
Safari	1+
Firefox	1+
Edge	12+
Opera	7+
Internet Explorer	9+

Conclusion

The JavaScript cancelable property is an essential feature for controlling and customizing event behaviors. By combining it with the preventDefault() method, you can create highly interactive and user-friendly web applications that handle user actions with precision. Remember to always check the cancelable property before attempting to prevent the default action of an event to ensure robust and reliable code. This allows for the prevention of default browser behavior, creation of custom navigation scenarios, and better control over user interaction.