The menu is not clicked by the mouse in the browser. Handling the right mouse button click (oncontextmenu). What is the context menu

Context menu is the menu that appears when you right-click on the screen. Typically, such menus are used to make it easier to perform favorite actions, such as sorting folders and files, opening a new application window, or accessing system settings.

For many years, the term "context menu" refers primarily to native applications. However, now we have the opportunity to take advantage of it in web applications as well. An example is the file manager in Gmil. This menu is implemented using javascript code:

In the future, we will be able to create context menus for HTML5 based sites. We invite you to familiarize yourself with this approach.

Context menu development

HTML5 introduced us to 2 new elements: menu and menuitem, and they allow you to create context menus. In order for the browser to treat the menu element as a "context menu", we need to set the menu type to context and also give it a unique ID.

Below is an example where we create a context menu with these properties.

We also have the ability to add submenus by branching the menu element like this:

Now, in order for the context menu to appear on the screen when the right mouse button is clicked, we use a new HTML attribute called contextmenu. This attribute is used to identify the menu with the specified ID. Given our example above, we can define our context menu with contextmenu=context-menu-id.

We can set an attribute on the body tag if we want to use the context menu throughout the page. We can also add it to the HTML element so that this menu used exclusively within this element.

Now a new context menu will appear inside the Operating System menu, as seen in the example below.

Adding an icon

We are sure that many of you have seen context menus that use icons. In some cases, an icon can be a great visual aid to help users find the menu. In addition, it also allows users to understand what the menu is for.

We can also add an icon to our HTML5 context menu using the icon attribute:

Here is what we will see in the browser window.

Making the menu work

At this point, our new context menu will not work on click. However, we can very easily bring him to his senses by means of small code javascript. In our example, the menu is called Email Selection. This menu allows users to send selected text via email.

To make it work, let's add a feature that will allow users to use the highlighted code.

Function getSelectedText() (
var text = "";
if(window.getSelection) (
text = window.getSelection().toString();
) else if (document.selection && document.selection.type != "Control") (
text = document.selection.createRange().text;
}
return text;
};
We then create another function, let's say sendEmail() , that opens the email client. The subject of the letter will be the entered text from the document header, and the body of the letter will be filled with the selected text.

function sendEmail() (
var bodyText = getSelectedText();
window.location.href = "mailto:?subject="+ document.title +"&body="+ bodyText +"";
};
Finally, we add this functionality to our menu via the onclick attribute.

Email Selection
We've previously told you about how to use HTML5 EditableContent which allows us to edit web content right on the page. We can use this function, adding it to our menu called “Edit Content”.

In conclusion

Personally, we were very happy with this new feature. We see a lot of possibilities in it. Unfortunately, at the time of this writing, only Firefox supports this feature. We hope that other browsers will soon connect to it.

You can view a demo below (only works in Firefox).

In this tutorial, we'll take a look at a rarely mentioned HTML5 feature, the contextmenu. Maybe you have never heard of such a menu before, but in some situations it can be extremely useful.

What can the contextmenu attribute be used for? It allows you to add various options to the right-click browser context menu with just a few lines of HTML, even when Javascript is disabled. Although at present this handy tool only available in Firefox.

Here is how it works:

Using the contextmenu is much easier than it might seem at first glance. You need to add the contextmenu attribute:

Then we create the menu:

The id attribute must match the contextmenu attribute. Thus, it is possible to use different context menus for different parts of the page.

Then we add menu items. First we insert a menu item with text and an icon, then we add a link to broadcast the current page to Facebook, and finally we insert a link to refresh the page. It turns out a context menu with three items:

You can also create submenus:

A very interesting and useful property of HTML5. But, its application is limited only to the Firefox browser.

The performance of all devices. In case of failures, breakdowns, it is not always necessary to call specialists, sometimes paying for their services at rather high prices. Many shortcomings, errors can be corrected independently. These kinds of failures, errors include when the right mouse button does not open the context menu. How to act in such cases?

First, you should find out why the operation fails, why the context menu does not work. windows menu 10. There are several possible reasons for this:

registry clutter with obsolete files;
lack of programs included in the context menu, their unstable operation.

Let's consider what to do in these cases, how to change the situation when the right-click context menu does not open.

If the right-click context menu does not appear due to the registry being cluttered with obsolete files, we recommend using a utility for cleaning, for example, Glary Utilities. Glary Utilities is a set of system tweakers, utilities that help protect, fine tuning, improve PC performance. Using the set, you can remove unnecessary files that clog the system, registry entries that are long outdated, optimize the RAM, manage startup, optimize memory and other functions useful for the good functioning of the computer. Glary Utilities can be downloaded for free.

After setting the settings, clean your device from junk files through the same utility, clean the registry, thereby increasing the speed of the computer.

Freeze bug fix

If when you click RMB on a file or folder, the context menu on the desktop does not work, the computer freezes, the key does not respond to commands, you can fix this freeze in two ways, we recommend that you do both in sequence. Before proceeding with any of them, you need to have administrator rights. You will have to work with the registry, here you need to be careful, if you do it incorrectly, the system may fail. Therefore, when starting the process of fixing failures, be sure to create a system restore point before deleting anything.

A “silent” freeze is usually caused by an unstable program, a frozen program, or when a link in the context menu points to a non-existent resource.

Method one

Follow the steps in sequence:

Check the list that appears for the programs you have already uninstalled.
If there is a program that you removed in the list, remove it from the registry. Before deleting any registry key, we recommend that you create a backup copy of it to save in case you need to restore it.

Method two

The algorithm for the second method, when the Windows 10 context menu does not open, will be as follows.

Open the registry editor as described in steps 1-2 of the previous method.
Open subkey HKEY_CLASSES_ROOT,
In it you will see several subsections with names like "name_programm.exe", "name_programm.dll". Check each one in turn by clicking LMB, up to the “command” subsection. All subsections must be open. If it does not open, in the right part of the window, see the presence of the "NoOpenWith" parameter. There is no such parameter - create it. For what follow the steps:

Having found the “command” subsection, click LMB, check for the presence of the “(Default)” parameter on the right side. The parameter must be set to the application or network resource that exist on the computer.

If the parameter refers to a resource that is no longer present, the entire section that begins with the name of this resource, the program, should be deleted. Do not forget to create a backup copy before deleting for restoration if necessary. Delete by clicking on the name of the section with RMB, then clicking "Delete" - "Yes".

After completing the two methods, the context menu should open, the PC will stop freezing when RMB clicks on the file.

It is not difficult to get the context menu working, just remember that any attempts to change the registry can lead to unstable PC operation, so do not forget to create restore points, archive copies of programs to be removed. When the right mouse button does not open the context menu, follow the instructions above in sequence, apply all methods, the error will be fixed.

Have you noticed that right-clicking on images on some sites does nothing. It seems as if the button clicks idle, and the browser does not care about it - it “freezes and thinks”. In reality, the browser simply blocks clicks by receiving such a command from the JavaScript script of the loaded page.

How unlock right button to click on an image to save it for offline viewing? In most Internet browsers, this is enough to "dig" in the advanced settings JavaScript.. So…

If you have " Opera»:
1. Follow the path "Tools" -> "General Settings";
2. In the window that appears, stop at the "Content" item and find the "Configure JavaScript" button (see Fig. 1).

3. By clicking on it, call the window for detailed JavaScript settings and uncheck the box next to the "Block right button" line.
After confirmation (clicking on "Ok"), this button will become "free" for calls to the context menu. Incidentally, in firefox» To unlock the right button, you need to uncheck the box next to such an item (see Fig. 2).

In other advanced browsers, the blocking of the right button is removed in the same way - through the same advanced JavaScript settings.

Web applications today are becoming a new step in the development of the web. These are far from ordinary information sites. Gmail and Dropbox are examples of advanced web applications. As the functionality, accessibility, and usefulness of web applications grows, so does the need to increase the efficiency of their use. This guide will look at creating such a useful thing as your own context menu, and in particular:

Let's figure out what a context menu is and why it is needed.
We implement our context menu using JS and CSS.
Let's touch on the shortcomings and limitations of the approach used in order to know what problems can warn us when rolling out all this in production.

What is a context menu?

According to Wikipedia, the context menu is a menu that appears when the user interacts with GUI(by pressing the right mouse button). The context menu contains a limited set possible actions, which is usually associated with the selected object.

On your computer, right-clicking on the desktop will bring up a context menu operating system. From here, you can probably create a new folder, get some information, and do something else. The context menu in the browser allows, for example, to get information about the page, view its source code, save an image, open a link in a new tab, work with the clipboard, and so on. Moreover, the set of available actions depends on where exactly you clicked, that is, on the context. This is the standard behavior laid down by browser developers [ And extensions to it].

Web applications are slowly starting to replace standard context menus with their own. Gmail and Dropbox are great examples. The only question is how to make your own context menu? In the browser, right-clicking fires the contextmenu event. We will have to override the default behavior and make it so that our own menu is displayed instead of the standard menu. This is not so difficult, but we will understand it step by step, so it will come out quite voluminous. To start, let's create basic structure applications so that the example being developed is not completely out of touch with reality.

Task list

Let's imagine that we are creating an application that allows us to maintain a list of tasks. I understand that you are probably already incredibly tired of all these task lists, but so be it. The application page contains a list of pending tasks. For each task, a typical set of CRUD actions is available: get information about the task, add a new one, edit, delete.

From the translator
Translation in places is quite free, but not to the detriment of meaning or content. Everything that is not directly related to the original is included in the notes.
With suggestions, wishes and comments, as usual, in the PM.

Thematic materials: