Thuộc tính chi tiết HTML DOM UiEvent trả về một số tương ứng với các 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
Sau đây là cú pháp -
Số lượng nhấp chuột trả về được kích hoạt liên tục -
event.detail
Hãy để chúng tôi xem ví dụ về Chi tiết sự kiện tài sản -
Ví dụ
<!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">High Score: 0</h2>
<h2 id="currScore">Current Score: 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 = 'Current Score: '+score;
if(score > high){
highScore.textContent = 'High Score: '+score;
high = score;
}
}
</script>
</body>
</html> Đầu ra
Trước khi nhấp vào phần tử div màu vàng -
Sau khi nhấp liên tục vào phần tử div màu vàng -
Sau khi nhấp vào phần tử div màu vàng liên tục nhưng ít hơn lần trước -
