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 DOM UiEvent detail Property
The HTML DOM UiEvent detail property returns a number that indicates how many times a mouse button was clicked in rapid succession. This property is particularly useful for detecting single clicks, double clicks, triple clicks, and other consecutive click patterns.
Note − The detail property returns 2 for double-click events, 3 for triple-click events, and always 0 for mouse events that don't involve clicking such as onmouseover or onmouseout.
Syntax
Following is the syntax for accessing the detail property −
event.detail
Return Value
The detail property returns an integer representing the number of consecutive clicks:
1− Single click2− Double click3− Triple click0− Non-click events (mouseover, mouseout, etc.)
Example − Click Counter Game
Following example demonstrates the UiEvent detail property by creating a simple click counter game. The game tracks consecutive clicks and maintains a high score −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM UiEvent detail</title>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
font-family: Arial, sans-serif;
}
* {
padding: 2px;
margin: 5px;
}
#playArea {
display: inline-block;
border-radius: 50%;
background-color: #DC3545;
width: 50px;
height: 50px;
border: 3px solid #AC3509;
position: relative;
}
#clickOn {
border: 3px solid #F0FF33;
margin: 15px auto;
border-radius: 50%;
background-color: #FFF933;
width: 10px;
height: 10px;
cursor: pointer;
}
h2 {
display: inline-block;
margin: 10px;
}
fieldset {
padding: 20px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>UiEvent Detail Property Demo</legend>
<h2 id="highScore">High Score: 0</h2>
<h2 id="currScore">Current Score: 0</h2><br>
<p>Click the yellow dot rapidly to increase your score!</p>
<div id="playArea">
<div onclick="getHighScore(event)" id="clickOn"></div>
</div><br>
</fieldset>
</form>
<script>
var clickOn = document.getElementById("clickOn");
var playDisplay = document.getElementById("playArea");
var highScore = document.getElementById("highScore");
var currScore = document.getElementById("currScore");
var high = 0, score = 0;
function getHighScore(event) {
var score = event.detail;
currScore.textContent = 'Current Score: ' + score;
if(score > high) {
highScore.textContent = 'High Score: ' + score;
high = score;
}
}
</script>
</body>
</html>
The output shows a game interface where clicking the yellow dot rapidly increases the score based on consecutive clicks −
High Score: 0 Current Score: 0 Click the yellow dot rapidly to increase your score! [Red circle with yellow dot in center] After rapid clicking: High Score: 4 Current Score: 3
Example − Different Event Types
Following example shows how the detail property behaves with different mouse events −
<!DOCTYPE html>
<html>
<head>
<title>UiEvent Detail for Different Events</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<div id="testDiv" style="width: 200px; height: 100px; background-color: lightblue;
border: 2px solid blue; text-align: center; padding: 20px; cursor: pointer;">
Test Area - Try clicking, double-clicking, or hovering
</div>
<p id="output">Event details will appear here</p>
<script>
var testDiv = document.getElementById("testDiv");
var output = document.getElementById("output");
testDiv.addEventListener("click", function(event) {
output.textContent = "Click event - detail: " + event.detail;
});
testDiv.addEventListener("dblclick", function(event) {
output.textContent = "Double-click event - detail: " + event.detail;
});
testDiv.addEventListener("mouseover", function(event) {
output.textContent = "Mouseover event - detail: " + event.detail;
});
testDiv.addEventListener("mouseout", function(event) {
output.textContent = "Mouseout event - detail: " + event.detail;
});
</script>
</body>
</html>
This example demonstrates how different mouse events produce different detail values −
[Light blue test area with border] Event details will appear here After single click: "Click event - detail: 1" After double click: "Double-click event - detail: 2" After mouse hover: "Mouseover event - detail: 0"
Common Use Cases
The UiEvent detail property is commonly used for:
Click games − Creating games that require rapid clicking or specific click patterns
User interaction tracking − Monitoring how users interact with interface elements
Custom double-click handlers − Implementing custom behavior for multiple consecutive clicks
Accessibility features − Providing alternative interactions for users who may have difficulty with traditional double-clicking
Browser Compatibility
The UiEvent detail 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.
Conclusion
The UiEvent detail property provides valuable information about consecutive mouse clicks, returning integer values that correspond to the number of rapid clicks performed. This property is essential for creating interactive web applications that respond to different clicking patterns and is widely supported across all modern browsers.
103 Views
