Thuộc tính detail của UiEvent trong HTML DOM trả về một số tương ứng với số lần nhấp chuột được kích hoạt liên tục.
LƯU Ý - Nếu sự kiện ondblclick được kích hoạt, giá trị trả về là '2', và luôn là '0' nếu sự kiện onmouseover hoặc onmouseout được kích hoạt.
Cú pháp
Trả về số lần nhấp chuột liên tục:
event.detail
Ví dụ
Dưới đây là ví dụ minh họa thuộc tính Event detail:
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM UiEvent detail</title>
<style>
form { width: 70%; margin: 0 auto; text-align: center; }
* { padding: 2px; margin: 5px; }
input[type="button"] { border-radius: 10px; }
#playArea { display: inline-block; border-radius: 50%; background-color: #DC3545; width: 50px; height: 50px; border: 3px solid #AC3509; }
#clickOn { border: 3px solid #F0FF33; margin: 15px auto; border-radius: 50%; background-color: #FFF933; width: 10px; height: 10px; }
h2 { display: inline-block; }
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-UiEvent-detail</legend>
<h2 id="highScore">Điểm Cao: 0</h2>
<h2 id="currScore">Điểm Hiện Tại: 0</h2><br>
<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 = 'Điểm Hiện Tại: ' + score;
if (score > high) {
highScore.textContent = 'Điểm Cao: ' + score;
high = score;
}
}
</script>
</body>
</html>
Kết quả
Trước khi nhấp vào phần tử div vàng:
Sau khi nhấp vào phần tử div vàng liên tục:
Sau khi nhấp vào phần tử div vàng liên tục nhưng ít hơn lần trước:
