On Double Click of button ondblclick()

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>

Visitors Rating
Your Rating




Google+

Post Comment This is for short comments only. Use the forum for more discussions.




HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2018 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer