JavaScript ondblclick Event
Why ondblclick ?
The JavaScript ondblclick property is mounted on the onclick property. The onclick feature works only once. The ondblclick feature works twice after being clicked repeatedly.
Syntax:
| HTML Attribute | <element ondblclick = “handler(event)“> |
| Event Property | object.ondblclick = handler; |
| attachEvent Method | object.attachEvent(“ondblclick“, handler) |
| addEventListener Method | object.addEventListener(“dblclick“, handler, useCapture) |
ondblclick Examples
Example 1
<body>
<button ondblclick="dblFunction()">CLICK</button>
<script>
function dblFunction() {
alert("The ondblclick property worked successfully.")
}
</script>
</body>Example 2
<body>
<button ondblclick="dblFunction()">CLICK</button>
<script>
document.getElementById("but").ondblclick = function () {
dblFunction();
}
function dblFunction() {
alert("The ondblclick property worked successfully.")
}
</script>
</body>Example 3
<body>
<button id="but">CLICK</button>
<script>
document.getElementById("but").addEventListener("dblclick", dblFunction)
function dblFunction() {
alert("The ondblclick property worked successfully.")
}
</script>
</body>Example 4
<body>
<button id="but">CLICK</button>
<script>
document.getElementById("but").ondblclick = function(){
alert("The ondblclick property worked successfully.")
}
</script>
</body>Example 5
<body id="win">
<button id="red">RED</button>
<button id="blue">BLUE</button>
<button id="green">GREEN</button>
<button id="orange">ORANGE</button>
<button id="yellow">YELLOW</button>
<script>
document.getElementById("red").ondblclick = function () {
document.getElementById("win").style.background = "red"
}
document.getElementById("blue").ondblclick = function () {
document.getElementById("win").style.background = "blue"
}
document.getElementById("green").ondblclick = function () {
document.getElementById("win").style.background = "green"
}
document.getElementById("orange").ondblclick = function () {
document.getElementById("win").style.background = "orange"
}
document.getElementById("yellow").ondblclick = function () {
document.getElementById("win").style.background = "yellow"
}
</script>
</body>Example 6
<body>
<div id="box"></div>
<button id="left">LEFT</button>
<button id="right">RIGHT</button>
<button id="up">UP</button>
<button id="down">DOWN</button>
<script>
let left = document.getElementById("left"),
right = document.getElementById("right"),
up = document.getElementById("up"),
down = document.getElementById("down"),
box = document.getElementById("box");
left.ondblclick = function () {
box.style.transform = "translateX(-80px)"
}
right.ondblclick = function () {
box.style.transform = "translateX(80px)"
}
up.ondblclick = function () {
box.style.transform = "translateY(80px)"
}
down.ondblclick = function () {
box.style.transform = "translateY(-80px)"
}
</script>
</body>Example 7
<body>
<h2 id="txt">JAVASCRIPT</h2>
<button ondblclick="family1()">1</button>
<button ondblclick="family2()">2</button>
<button ondblclick="family3()">3</button>
<button ondblclick="family4()">4</button>
<button ondblclick="family5()">5</button>
<script>
let txt = document.getElementById("txt");
function family1() {
txt.style.fontFamily = "arial"
}
function family2() {
txt.style.fontFamily = "Verdana"
}
function family3() {
txt.style.fontFamily = "Andalus"
}
function family4() {
txt.style.fontFamily = "AR CENA"
}
function family5() {
txt.style.fontFamily = "Broadway"
}
</script>
</body>
Advertisements
