Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Preventing default events

From: JavaScript: Events

Video: Preventing default events

So far we looked at different mass related events and learn how to add and delete DOM elements. Plus we also learned how to remove event listeners when necessary. I want to show you an example of how can you prevent some of the fault actions when working with events. So I'm going to use an event then handles right clicks called Context Menu. So let's go ahead and go into our code, and just update this paragraph, because we're going to do something a little bit different. So, I'm going to say right click on the image to see a larger version.

Preventing default events

So far we looked at different mass related events and learn how to add and delete DOM elements. Plus we also learned how to remove event listeners when necessary. I want to show you an example of how can you prevent some of the fault actions when working with events. So I'm going to use an event then handles right clicks called Context Menu. So let's go ahead and go into our code, and just update this paragraph, because we're going to do something a little bit different. So, I'm going to say right click on the image to see a larger version.

And also announce that the preview is going to follow the mouse. So I'll be using another event called mouse move to track the position of the mouse, you can get an idea of how that works. So that's all we need for the HTML and we'll dig into the JavaScript next. So, first thing I need to do is change my event so that instead of detecting a mouse over. It's going to detect something called context menu. So, now, if we go back into our movie, we refresh this, we click, we're not going to get anything.

If we right click, we're going to get the bigger photo. However, we're also getting this pop-up menu. And that's because the default action for right click is to bring the OS' context menu. But if you see in applications like Google Drive or Google Docs, you know that you can create drop down menus that are customized to whatever you're doing at the moment. So this is how this event works. So we'll go back here and we need to prevent the default action. That's really easy to do. All we have to do is, say prevent default.

So we'll just come down here and say e.preventDefault. And that prevents the default behavior of the event. So if we go back, we refresh. We right click. We're not going to get the default OS context menu. And if we masked out, it will still destroy the picture. Now, another thing that I want to is, it would be nice if the position of the image that I'm bringing up, which sort of follows the mouse position. I think that it's a better effect and it's not really that hard to do.

Let's go back into our code here, and we're going to add a few lines of codes, asking essentially for a new event. And we'll just put that right here. We'll say e.target, just like we did the other events, and say add event listener, and this time, we're going to look for an event called mouse move. So, mousemove, and of course we're going to execute a function just like before, and, and here we're going to pass along a new event handler, so it's going to be an event called f. And we're going to start the function, and you know what, since this is called event f, I'm going to move it right under this one which is called event D, just to keep the letters in order.

It's not really a big deal. And all we gotta do here is modify the value of the left position and the top position. Of this style-sheet for this element, so I'm going to do myElement, and use style, left. With this style property you can modify any CSS that you want to by using the style properties right here. So what I want to change is the left property, and that's going to be equal to f.offset. X.

And then plus 15, and you have to add the word px at the end of this, because you can't just give a left property a value, it has to have a pixel amount. So you have to put the px value. And we can do the same thing for the top. And of course in here we're going to use offsetY. And we're going to save this, and come back here. Refresh, and now when we right click, this is going to follow our mouse. Now there's a little bit of a problem, I don't know if you can tell, when I first right click.

You can see that the event first appears at its original position wherever we put it before and then it kind of jumps as soon as we move it. And that's not good. We need to make it be at the position that we want as soon as it's created. So I'm going to switch back over here and I'm going to copy these two. And whenever I generate the image. So here's where I create the image element. What I want to do is go ahead and add this right here. And of course I want to track not the f object because the f object doesn't get generated.

Until I start moving the mouse on a right click. So this is going to be tracking the e, which is the original event, so I"m going to say e right here and e right there, come back into the browser and refresh, and now when I right click it's immediately going to be in the proper position. And it's going to follow the mouse. So, not very much different here, with context menus that use the mouse move event to follow the mouse position. You need to worry about tracking the document's x and y position. We did that easily by working with JavaScript's ability to modify styles.

Now, as I mentioned before when you learn how to work with one event, any other events are going to be pretty similar. So hopefully you're getting the hang of working with different types of events.

Show transcript

This video is part of

Image for JavaScript: Events
JavaScript: Events

27 video lessons · 7011 viewers

Ray Villalobos
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed JavaScript: Events.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.