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 returnValue Event Property
The HTML returnValue event property is a legacy property that was used to control whether an event's default action should be prevented. While it has been deprecated in favor of the preventDefault() method, it is still supported in some browsers for backward compatibility.
Syntax
Following is the syntax for getting the returnValue property −
event.returnValue
Following is the syntax for setting the returnValue property −
event.returnValue = boolean
Parameters
The returnValue property accepts a boolean value −
true − Allows the event's default action to proceed (default behavior).
false − Prevents the event's default action from occurring.
Return Value
The property returns a boolean value indicating whether the event's default action will be executed. By default, it returns true unless explicitly set to false.
Basic Example
Following example demonstrates the basic usage of the returnValue property −
<!DOCTYPE html>
<html>
<head>
<title>returnValue Property Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>returnValue Property Demo</h2>
<input type="text" placeholder="Click to focus" onfocus="checkReturnValue(event)">
<p id="result">Focus on the input field to see the returnValue</p>
<script>
function checkReturnValue(event) {
document.getElementById('result').innerHTML =
'returnValue: ' + event.returnValue + ' (Event default action will proceed)';
}
</script>
</body>
</html>
When you focus on the input field, it displays the current returnValue −
returnValue: true (Event default action will proceed)
Preventing Default Action
The returnValue property can be set to false to prevent the default action of an event. This is commonly used with form submissions, link clicks, or keyboard events.
Example − Preventing Form Submission
<!DOCTYPE html>
<html>
<head>
<title>Prevent Form Submission</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Form Submission Prevention</h2>
<form onsubmit="preventSubmit(event)">
<input type="text" placeholder="Enter name" required>
<button type="submit">Submit</button>
</form>
<p id="message">Try submitting the form</p>
<script>
function preventSubmit(event) {
event.returnValue = false; // Prevent form submission
document.getElementById('message').innerHTML =
'Form submission prevented! returnValue set to: ' + event.returnValue;
}
</script>
</body>
</html>
The form submission is prevented and a message is displayed −
Form submission prevented! returnValue set to: false
Example − Preventing Link Navigation
<!DOCTYPE html>
<html>
<head>
<title>Prevent Link Click</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Link Click Prevention</h2>
<a href="https://www.example.com" onclick="preventClick(event)">
Click this link (navigation will be prevented)
</a>
<p id="status">Click the link above</p>
<script>
function preventClick(event) {
event.returnValue = false; // Prevent navigation
document.getElementById('status').innerHTML =
'Link click prevented! returnValue: ' + event.returnValue;
}
</script>
</body>
</html>
Clicking the link displays a message instead of navigating −
Link click prevented! returnValue: false
Modern Alternative
The returnValue property is deprecated. Modern JavaScript should use the preventDefault() method instead, which provides better cross-browser compatibility and cleaner code.
Comparison Example
<!DOCTYPE html>
<html>
<head>
<title>returnValue vs preventDefault</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Legacy vs Modern Approach</h2>
<button onclick="legacyMethod(event)">Legacy (returnValue)</button>
<button onclick="modernMethod(event)">Modern (preventDefault)</button>
<p id="output">Click either button</p>
<script>
function legacyMethod(event) {
event.returnValue = false; // Legacy approach
document.getElementById('output').innerHTML =
'Legacy: returnValue set to ' + event.returnValue;
}
function modernMethod(event) {
event.preventDefault(); // Modern approach
document.getElementById('output').innerHTML =
'Modern: preventDefault() called - defaultPrevented: ' + event.defaultPrevented;
}
</script>
</body>
</html>
Both methods prevent the default action, but preventDefault() is the recommended approach −
Legacy: returnValue set to false Modern: preventDefault() called - defaultPrevented: true
Browser Compatibility
The returnValue property has limited and inconsistent support across modern browsers. It was primarily used in Internet Explorer and is not part of the current web standards. Most modern browsers support it for backward compatibility, but its behavior may vary.
| Feature | returnValue | preventDefault() |
|---|---|---|
| Status | Deprecated | Standard |
| Browser Support | Limited/Inconsistent | Excellent |
| Recommended Use | Avoid in new projects | Use in all projects |
Conclusion
The HTML returnValue event property is a deprecated feature used to prevent an event's default action by setting it to false. While still supported in some browsers for backward compatibility, modern web development should use the preventDefault() method instead, which provides better cross-browser support and cleaner, more maintainable code.
172 Views
