Ondblclick event handling by JavaScript using div and button

We can trigger any function by using double click event of mouse. We will try this on a div tag and by using a button. Here is a simple code using a button.

<input type=button ondblclick=dbl_click(); value='Double Click'>

We will keep one button and a div layer where we will use double click event to change the background colour of the layer.

Demo of double click

Here is the source code of this demo

<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>Demo of double click on div tag & button</title>
<script langauge="javascript">
function dbl_click(){
document.getElementById("box").innerHTML= 'This is double click' ;
document.getElementById("box").style.background= '#ffccff' ;
}

</script>
<link rel="stylesheet" href="../images/all11.css" type="text/css">
</head>
<body>
<input type=button ondblclick=dbl_click(); value='Double Click'>
<div id='box' ondblClick=dbl_click(); style="position:absolute;left: 100px;top:50px;background-color: #f1f1f1; width: 300px; height : 100px;"> Double Click   here</div>
 <br><br><br><br><br> <br><br><br><br>
<a href=ondblclick-demo.php>Refresh and Try again</a>
</body>
</html>

Using double click and single click together.

By using same buttons and layers we can activate two different JavaScript functions based on the click type ( single click or double click )

Demo of single and double click

Source code is here.

<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>Demo of double click & Single click on button and on div tag</title>
<script langauge="javascript">
function dbl_click(){
document.getElementById("box").innerHTML= 'This is double click' ;
document.getElementById("box").style.background= '#ffccff' ;
}

function click_me(){
document.getElementById("box").innerHTML= 'This is single click' ;
document.getElementById("box").style.background= '#ccffff' ;
}
</script>
</head>
<body >

<div id='box' onClick=click_me(); ondblClick=dbl_click(); style="position:absolute;left: 100px;top:50px;background-color: #f1f1f1; width: 300px; height : 100px;"> Double Click or single click  here</div>
<input type=button value=Click onClick=click_me(); ondblclick=dbl_click();>
 <br><br><br><br><br> <br><br><br><br>
<a href=ondblclick-demo2.php>Refresh and Try again</a>

</body>
</html>

Event Handling onKeyPress Mouse event Textarea onClick event onKeyDown Mouse event

Subscribe to our YouTube Channel here

On Double Click of button ondblclick()

Using double click and single click together.

Subscribe