5 - 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.