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>
Event Handling onKeyPress Mouse event Textarea onClick event onKeyDown Mouse event
Subscribe to our YouTube Channel here


Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com







    Post your comments , suggestion , error , requirements etc here




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer