Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML cancelable Event Property
The cancelable event property in HTML determines whether an event can be canceled using the preventDefault() method. It returns true if the event is cancelable and false if it cannot be canceled.
This property is particularly useful when you need to check if an event's default behavior can be prevented before attempting to call preventDefault().
Syntax
Following is the syntax for the cancelable event property −
event.cancelable
Return Value
The cancelable property returns a boolean value −
true − The event is cancelable and its default action can be prevented.
false − The event is not cancelable and its default action cannot be prevented.
Examples of Cancelable vs Non-Cancelable Events
| Cancelable Events | Non-Cancelable Events |
|---|---|
| click, keydown, keypress, mousedown | keyup, mouseup, focus, blur, load |
| submit, contextmenu, beforeunload | resize, scroll, error, unload |
| touchstart, touchmove, wheel | touchend, touchcancel |
Basic Example
Following example demonstrates checking if a click event is cancelable −
<!DOCTYPE html>
<html>
<head>
<title>Cancelable Event Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Checking Cancelable Event</h2>
<p>Click the button to check if the event is cancelable:</p>
<button onclick="checkCancelable(event)" style="padding: 10px 20px; font-size: 16px;">Click Me</button>
<p id="result" style="margin-top: 20px; font-weight: bold;"></p>
<script>
function checkCancelable(event) {
var isCancelable = event.cancelable;
document.getElementById("result").innerHTML =
"Event is cancelable: " + isCancelable;
}
</script>
</body>
</html>
The output shows whether the click event can be canceled −
Event is cancelable: true
Comparing Different Event Types
Following example compares the cancelable property across different event types −
<!DOCTYPE html>
<html>
<head>
<title>Different Event Types</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Event Cancelable Property Test</h2>
<input type="text" id="textInput" placeholder="Type here..."
onkeydown="checkEvent(event, 'keydown')"
onkeyup="checkEvent(event, 'keyup')"
onfocus="checkEvent(event, 'focus')"
style="padding: 10px; font-size: 16px; width: 200px;">
<br><br>
<button onclick="checkEvent(event, 'click')" style="padding: 10px 20px; font-size: 16px;">Click Event</button>
<br><br>
<div id="eventLog" style="background: #f5f5f5; padding: 15px; border-radius: 5px;">
<h3>Event Log:</h3>
</div>
<script>
function checkEvent(event, eventType) {
var log = document.getElementById("eventLog");
var newEntry = document.createElement("p");
newEntry.innerHTML = eventType + " event - Cancelable: " + event.cancelable;
newEntry.style.margin = "5px 0";
newEntry.style.color = event.cancelable ? "#007f00" : "#cc0000";
log.appendChild(newEntry);
}
</script>
</body>
</html>
This example shows that keydown and click events are cancelable (true), while keyup and focus events are not cancelable (false).
Practical Use Case
Following example shows how to use the cancelable property to conditionally prevent default behavior −
<!DOCTYPE html>
<html>
<head>
<title>Conditional preventDefault</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Form Validation with Cancelable Check</h2>
<form onsubmit="handleSubmit(event)">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required style="padding: 8px; margin: 10px;">
<br>
<button type="submit" style="padding: 10px 20px; font-size: 16px;">Submit</button>
</form>
<p id="message" style="margin-top: 20px; font-weight: bold;"></p>
<script>
function handleSubmit(event) {
var messageEl = document.getElementById("message");
var email = document.getElementById("email").value;
if (event.cancelable) {
messageEl.innerHTML = "Event is cancelable. Checking validation...";
if (!email.includes("@")) {
event.preventDefault();
messageEl.innerHTML = "Form submission canceled - Invalid email format!";
messageEl.style.color = "red";
} else {
messageEl.innerHTML = "Validation passed! Form would submit normally.";
messageEl.style.color = "green";
event.preventDefault(); // Preventing actual submission for demo
}
} else {
messageEl.innerHTML = "Event is not cancelable - cannot prevent submission";
}
}
</script>
</body>
</html>
This example demonstrates checking if the submit event is cancelable before attempting to prevent form submission based on validation results.
Browser Compatibility
The cancelable property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+. It is part of the DOM Level 2 Events specification and provides consistent behavior across different platforms.
Key Points
The cancelable property is read-only and cannot be modified.
Not all events are cancelable - check the property before calling
preventDefault().User interaction events (click, keydown, mousedown) are typically cancelable.
System events (load, unload, resize) are usually not cancelable.
Custom events can be made cancelable by setting the cancelable parameter to true when creating them.
Conclusion
The cancelable event property provides a reliable way to determine if an event's default behavior can be prevented. This is essential for creating robust event handlers that safely use preventDefault() only when appropriate, avoiding potential errors in event handling code.
174 Views
