Javascript Double Click Event

Javascript Double Click Events

Hello guys, welcome to our javascript series! In the last segment we covered the Onclick events in Javascript and the three different ways to apply onclick events on an element. I hope you’ve tried the programs we covered in the previous lesson and practiced them.

(00/46)

Moving on, in today’s section, we’ll be looking at double click events which are similar to the single click events that we saw the last time. There isn’t a lot of difference between them… In double click events, we use the leftmost button of the mouse. If we look at the mouse here, there are two buttons, the right and the left. We usually use the left button for double clicks. So now we’ll look at how to bring a double click event to any place using the left button of the mouse with different methods.

So, let’s see this,

In Javascript there are three ways to add a double click event. Like we had seen in the single click event, similarly, in HTML, we use On double Click means “O N D B L ”. Even though “double” is spelled as D O U B L E with an “o”, “u” and “e”, we will not use them here. We will just use D B L, This is how we apply it in HTML. Next, in Javascript we have two ways. In the first way, whatever element we have, for example, take the body , where you get it using a document.. Dot ..get Element By ID or by the element or context you get, you can place on double click, you can see here, ON word , okay. So we can write on double click event on it and add the function.

The third way, like we had used the addEventListener,we can use that way too, here we will take the object, the we will take context and apply the add event listener method. Note that it should be “d b l click” and not “on dbl click”. Write a double click and then add the function. So, these are the three ways to enable a double click event in Javascript.

The first method we will look at is to enable a double click event on an element using HTML.

00:02:57

Now I’ll open Sublime Text and we’ll see the program for a double click event. So, first of all, set it to HTML.

Here we write, example…. double click(3 seconds pause ;typing) Script.

(3 seconds pause ;typing)

save..

We’ll go to our folder…. Here we will save it as a…dblclick, add an underscore 1, here but we’re adding underscore html. Because we are going to perform a double click through HTML.

So, let’s say I have a button. Here I have a button, but in double click it is not mandatory to take a button, or you can take something else also. Usually when we work with UI, that is User Interface, when we work in UI, buttons are commonly used for single clicks. The user is used to the habit of using the button by clicking it only once. It is a button, so we can click only once.

The button normally doesn’t have a double click option. So, even though we can apply a double click on a button without a problem, it is avoided keeping the UI perspective and the user’s habit in mind. Therefore a button commonly has a single click option, so, currently even while taking the example of double click on a button to learn the process, keep in mind the UI perspective. Suppose you have a header for example h1 or h2 or a division, div where we need to identify a division and have it perform something on a double click, these are situations where you would usually apply the double click event. 

00:04:54

Clear ? So now,

Let’s take an h2 tag here and write

Double click ….on this….. heading.

okay?

Let’s run what we’ve written. Here we have the program with the writing.

“Double click on this event”

Obviously nothing will happen on clicking it as we’ve not enabled it. Let’s say we give it some style in the following way.

(3 seconds pause ;typing)

Style (3 seconds pause ;typing) H2…. text align…(3 seconds pause ;typing)... center

 Now we have it in the center. Let’s say when I double click on it, I want it to set on a line within a paragraph, like you’re starting to read from that line.

Such as we are learning this from learnvern.

I’ll take a “p” tag here…P ID equal to…we can take any idea such as p1, let’s say I am taking an id, “p1”.

Suppose you want the line to set on p1 when you double click. So, here we’ll add “on…d b l …click” equal to “onDoubleClick()”. Note that I’ve used an uppercase “D” here to differentiate it. We’ve now written our on double click event. We’ll now define what happens in our on double click event.

Let’s take a function…. on double click (5 seconds pause ;typing)

Document dot getelement by ID

And here P1…dot..innerHTML equal to..this is.. Learnvern

We’ll save and reload it now. You see nothing happens when I click it, but when I double click it, we can see the line that is set which says “This is LearnVern”. 

So, you see it happens when I double click on it. For a proper view, you can write “h2 comma p” to place it… exactly below it. Here we have the double click where you can click it twice to view the sentence. It goes away when you reload it and on double click the text will be set again. Therefore, here you see we’ve applied our On double click event on the HTML element “h2”. 

00:07:38

I hope everything is clear, so far.

Now, Let’s go back to the slide where our next method is using Javascript. First we used HTML, but suppose I don’t wish to use it. I don't want to use the event handler or any other of the previous commands, I will do it using on double click event in Javascript. To do so, we’ll copy the entire program here and write

Example double click…. Javascript

and then remove the shown portion. As mentioned, we are using javascript, so we will apply the method on “h2”. So what will we write here ?

First let’s give an ID to H2 so that it gets identified. ID H2, since H2 is also the name of tag, let’s write Header here…. Here we will write (5 seconds pause ;typing) document…dot..get element…(3 seconds pause ) by ID Header2 dot.., on double click

After the main portion of ‘on D B L on double click’ we will add the function.

We will give a space equal to the function that

we have already written, I’ll place it here. Here we have the function.

So the function name, and we will remove the space.

(5 seconds pause ;typing)

And this is our function.

Control plus S, Save it and you have your program.

If you double click on the heading, you will get the same output of “This is LearnVern”. The only thing we’ve changed from the previous method is that we’ve given h2 an id, we got h2 by get an element by ID and after getting it and adding on double click and the function without adding the name of the function, we have to directly write the event we want to fire.

00:09:58

Next on the slide we have the third method using the addEventListener. Like on double click, we have to define the addEventListener method and pass the function. Let’s say you copy the same thing to a new program. Write the following.

Example double click….(6 second pause ;typing) addeventlistener

 Remove the on double click

ID…. header1 ….

In this case you need the function, so document…dot ..get element by Id …

Here; our header1 and after the main portion of add…..Event…Listener, put the listener which, please note is not on double click, it is d b l c l i c k, double click. And after the comma, add the name of your function. Save… and run the program.(3 seconds pause ) double click..

This is our program.

Here, as soon as I double click, I get the output, that is you can see LearnVern. As you can see, the output of all three programs is the same, there is no difference.

The only difference is in the implementation of the programs and how we’ve executed them.

You can see in the first program we’ve added on double click in the HTML portion. In the second program, we’ve added on double click on the object reference of our element and in the third program we’ve added the addEventListener. These are the three ways we’ve taken to implement the double click event. You can use them according to your feasibility and requirement, be it website development or web application development, wherever you need it, it can be used appropriately. All three give the same output. 

You can decide which method you want to use.

So this was our topic of double click events.

If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.

In the next segment we will have an in-depth discussion on Onload Events in Javascript.

(edited script)