Работа с щракване с десния бутон на мишката (oncontextmenu). Персонализирано контекстно меню с помощта на JavaScript Защо десният бутон на мишката не отвори менюто

Забелязали ли сте, че щракването с десния бутон върху снимки в някои сайтове не работи. Изглежда, че бутонът щраква на празен ход и браузърът не го интересува - „виси и мисли“. В действителност браузърът просто блокира кликванията, когато получи такава команда от скрипта на JavaScript на заредената страница.

как отключване на десния бутон, така че като щракнете върху снимката, да я запазите за гледане офлайн? В повечето интернет браузъри е достатъчно да "копаете" в разширените настройки JavaScript .. Така…

Ако имате " опера»:
1. Следвайте пътя "Инструменти" -\u003e "Общи настройки";
2. В прозореца, който се показва, спрете на елемента „Съдържание“ и намерете бутона „Конфигуриране на JavaScript“ (вижте Фигура 1).

3. Кликвайки върху него, отворете прозореца за подробни настройки на JavaScript и премахнете отметката от квадратчето до реда „Блокиране на десния бутон“.
След потвърждение (щракване върху "Ок") този бутон ще стане "безплатен" за разговори към контекстното меню. Между другото, в „ Firefox»За да отключите десния бутон, трябва да премахнете отметката от квадратчето до такъв елемент (вижте фиг. 2).

В други разширени браузъри блокирането с десния бутон се премахва по същия начин - чрез същите разширени настройки на JavaScript.

Цел: да хванете десния бутон на мишката в прозореца на браузъра и да покажете свое собствено контекстно меню.

Какво се случва, когато щракнете с десния бутон на мишката в прозорец на браузъра? Ще се появи контекстно меню, чийто вид и набор от функции ще зависят от вида на браузъра и мястото, на което сте кликнали.
Но какво ще стане, ако искаме да блокираме контекстното меню на браузъра и да покажем своето? Може би? Да. За съжаление не е крос-браузър, но кодът по-долу ще работи в Gecko, Safari и IE. Opera не предоставя тези функции по подразбиране.

Първо, нека нарисуваме три DIV-та, в 2 от които ще покажем собственото си контекстно меню, а в третия ще оставим браузъра по подразбиране.

"височина: 100px; рамка: 1px плътно червено; цвят на фона: #FFCCCC;"> Кликнете с десния бутон

"височина: 100px; рамка: 1px плътно синьо; цвят на фона: #CCCCFF;"> Кликнете с десния бутон

"височина: 100px; рамка: 1px плътно зелено; цвят на фона: #CCFFCC;"> Кликнете с десния бутон


"позиция: абсолютна; горе: 0; вляво: 0; граница: 1px плътно # 666; цвят на фона: #CCC; дисплей: няма; плава: ляво;">


Както можете да видите, уловът на натискане на десния бутон става с помощта на събитието oncontextmenu... За да напишете кода за функцията на менюто, се нуждаете от следните компоненти:
- Функция за добавяне на обработващи събития. Използва се за скриване на собственото контекстно меню при щракване в други части на документа.
- Функция за определяне на координатите на показалеца на мишката. Използва се за определяне на позицията, в която ще покажем контекстното меню.
Можете да блокирате изскачащите прозорци на стандартното меню на браузъра, като просто върнете невярно.

Сега кодът:

// Функция за определяне на координатите на показалеца на мишката
функция defPosition (събитие) (
var x \u003d y \u003d 0;
if (document.attachEvent! \u003d null) (// Internet Explorer & Opera
x \u003d window.event .clientX + (document.documentElement .scrollLeft? document.documentElement .scrollLeft: document.body .scrollLeft);
y \u003d window.event .clientY + (document.documentElement .scrollTop? document.documentElement .scrollTop: document.body .scrollTop);
) else if (! document.attachEvent && document.addEventListener) (// Gecko
x \u003d event.clientX + window.scrollX;
y \u003d събитие.clientY + window.scrollY;
) друго (
// Не правете нищо
}
връщане (x: x, y: y);
}

функционално меню (тип, evt) (
// Блокиране на барботирането на събитието контекстуално меню
evt \u003d evt || window.event;
evt.cancelBubble \u003d вярно;
// Показване на нашето контекстно меню
var menu \u003d document.getElementById ("contextMenuId");
var html \u003d "";
превключвател (тип) (
случай (1):
html \u003d „Меню за първия DIV“;
html + \u003d "
Първа функция "
;
html + \u003d "
Втора функция "
;
html + \u003d "
Трета функция "
;
прекъсване;
случай (2):
html \u003d „Меню за втория DIV“;
html + \u003d "
(Празна)" ;
прекъсване;
по подразбиране:
// Нищо
прекъсване;
}
// Ако има какво да покаже, покажете го
ако (html) (
menu.innerHTML \u003d html;
menu.style .top \u003d defPosition (evt) .y + „px“;
menu.style .left \u003d defPosition (evt) .x + "px";
menu.style .display \u003d "";
}
// Блокирайте изскачащото меню на стандартното меню на браузъра
върнете невярно;
}

// Затворете контекста, когато щракнете върху левия или десния бутон върху документа
// Функция за добавяне на обработващи събития
функция addHandler (обект, събитие, манипулатор, useCapture) (
ако (object.addEventListener) (
object.addEventListener (събитие, манипулатор, useCapture? useCapture: невярно);
) else if (object.attachEvent) (
object.attachEvent ("on" + събитие, манипулатор);
) друго предупреждение ( „Добавяне на манипулатор не се поддържа“) ;
}
addHandler (документ, "контекстуално меню", функция () (

} ) ;
addHandler (документ, "щракване", функция () (
document.getElementById ("contextMenuId") .style .display \u003d "none";
} ) ;

В този урок ще разгледаме рядко споменатия трик за HTML5 - контекстно меню. Може би никога не сте чували за такова меню преди, но в някои ситуации може да бъде изключително полезно.

За какво може да бъде атрибутът контекстно меню? Тя ви позволява да добавяте различни опции към контекстното меню на браузъра с десния бутон на мишката само с няколко реда HTML код, дори когато Javascript е деактивиран. Въпреки че в момента такъв удобен инструмент е наличен само в Firefox.

Ето как работи:

Използването на контекстуално меню е много по-лесно, отколкото може да изглежда на пръв поглед. Трябва да добавите атрибута контекстуално меню:

След това създаваме менюто:

Атрибутът id трябва да съответства на атрибута контекстуално. По този начин е възможно да се използват различни контекстни менюта за различни части на страницата.

След това добавяме елементи от менюто. Първо, поставете елемент от менюто с текст и икона, след това добавете линк за излъчване на текущата страница във Facebook и накрая поставете връзка, за да опресните страницата. Оказва се контекстно меню с три елемента:

Можете също да създадете подменюта:

Много интересно и полезно свойство HTML5. Но използването му е ограничено само до браузъра Firefox.

Контекстното меню е менюто, което се появява, когато щракнете с десния бутон върху екрана. Обикновено тези менюта се използват за улесняване на изпълнението на избрани действия, като сортиране на папки и файлове, отваряне на нов прозорец на приложение или достъп до системните настройки.

В продължение на много години терминът "контекстно меню" се отнася предимно за родните приложения. Сега обаче имаме възможността да се възползваме от това и в уеб приложенията. Пример за това е файловият мениджър в Gmil. Това меню се реализира с помощта на JavaScript код:

В бъдеще ще имаме възможността да създаваме контекстни менюта за сайтове, базирани на HTML5. Каним ви да се запознаете с този подход.

Разработване на контекстно меню

HTML5 ни представи 2 нови елемента, меню и menuitem и те ви позволяват да създавате контекстни менюта. За да може браузърът да третира елемента от менюто като "контекстно меню", трябва да зададем типа меню на контекста и също така да му дадем уникален идентификационен номер.

По-долу е даден пример, в който създаваме контекстно меню с тези свойства.


Редактиране на съдържание
Избор на имейл

Също така имаме възможност да добавим подменюта, като разклоните елемента от менюто, както следва:


Редактиране на съдържание
Избор на имейл

Facebook
кикотене


Сега, за да може контекстното меню да се появи на екрана при щракване с десния бутон, използваме нов атрибут HTML, наречен контекстуално меню. Този атрибут се използва за идентифициране на менюто с посочения идентификатор. Като имаме предвид нашия пример по-горе, можем да определим нашето контекстно меню с контекстно меню \u003d контекст-меню-идентификатор.

Можем да зададем атрибут на етикета на тялото, ако искаме да използваме контекстното меню в цялата страница. Можем също да го добавим към HTML елемент, така че това меню да се използва изключително в рамките на този елемент.

Ново контекстно меню вече ще се появи под менюто на операционната система, както се вижда в примера по-долу.


Добавете икона

Сигурни сме, че много от вас са виждали контекстни менюта, които използват икони. В някои случаи една икона може да бъде чудесно визуално помощно средство, за да помогне на потребителите да намерят менюта. В допълнение, той също така дава възможност на потребителите да разберат за какво е менюто.


Можем също да добавим икона към контекстното ни меню HTML5, използвайки атрибута на иконата:


Редактиране на съдържание
Избор на имейл

Facebook
кикотене


Това ще видим в прозореца на браузъра.


Настройване на менюто

На този етап новото ни контекстно меню няма да работи при натискане. Въпреки това можем много лесно да го докараме до себе си с малко javascript код. В нашия пример менюто се нарича Избор на имейл. Това меню позволява на потребителите да изпращат избран текст по имейл.

За да работи той, нека добавим функция, която позволява на потребителите да използват заден код.

Функция getSelectedText () (
var text \u003d "";
ако (window.getSelection) (
text \u003d window.getSelection (). toString ();
) else if (document.selection && document.selection.type! \u003d "контрол") (
текст \u003d document.selection.createRange (). текст;
}
връщане на текст;
};
Тогава създаваме друга функция, да предположим sendEmail (), която отваря имейл клиент. Темата на писмото ще бъде въведен текст от заглавката на документа, а тялото на писмото ще бъде запълнено с избрания текст.

Функция sendEmail () (
var bodyText \u003d getSelectedText ();
window.location.href \u003d "mailto :? subject \u003d" + document.title + "& body \u003d" + bodyText + "";
};
И накрая, ние добавяме тази функционалност към менюто ни чрез атрибута onclick.

Избор на имейл
По-рано ви показахме как да използвате HTML5 EditableContent, който ни позволява да редактираме уеб съдържание точно на страницата. Можем да използваме тази функция, като я добавим в менюто ни, наречено „Редактиране на съдържание“.

В заключение

Лично ние сме много щастливи от тази нова функция. В него виждаме много възможности. За съжаление, по времето на писането само тази Firefox поддържа тази функция. Надяваме се, че скоро други браузъри ще се свържат с него.

По-долу можете да видите демонстрация (работи само във Firefox).

Производителността на всички устройства. В случай на повреди, повреди, не винаги е необходимо да се обаждате на специалисти, като плащате за услугите им понякога на доста високи цени. Много недостатъци, грешки можете да коригирате сами. Този вид сривове, грешки включват, когато десният бутон на мишката не отваря контекстното меню. Какво да правя в такива случаи?

Първо трябва да разберете защо възниква повредата, защо контекстното меню на Windows 10 не работи. Тук има няколко възможни причини:

  • затрупан регистър с остарели файлове;
  • липсата на програми, включени в контекстното меню, тяхната нестабилна работа.

Нека помислим какво да правим в тези случаи, как да променим ситуацията, когато контекстното меню не се отваря с десния бутон на мишката.

Ако контекстното меню с десния бутон на мишката не се появи, тъй като регистърът е пълен с остарели файлове, препоръчваме да използвате помощна програма, например Glary Utilities, за почистване. Glary Utilities е набор от системни ощипвания, комунални услуги, които помагат за защита, настройване и подобряване на работата на компютъра. С помощта на набора можете да изтриете ненужни файлове, които запушват системата, записи в регистъра, които отдавна са остарели, оптимизирате оперативната памет, управлявате стартирането, оптимизирате паметта и други функции, полезни за доброто функциониране на компютъра. Glary Utilities е безплатен за изтегляне.


След като зададете настройките, почистете устройството си от ненужни файлове, използвайки същата помощна програма, почистете системния регистър, като по този начин увеличите скоростта на компютъра.

Замразяване на грешка за отстраняване

Ако, когато щракнете с десния бутон върху файл, папка, контекстното меню на работния плот не работи, компютърът замръзва, ключът не отговаря на команди, можете да премахнете това замразяване по два начина, препоръчваме да правите и двете последователно. Преди да продължите с някой от тях, трябва да имате администраторски права. Ще трябва да работите с регистъра, тук трябва да внимавате, ако направите нещо нередно, системата може да се срине. Ето защо, когато стартирате процеса на коригиране на грешки, не забравяйте да създадете точка за възстановяване на системата, преди да изтриете нещо.

„Тъпото“ окачване обикновено се причинява от нестабилна програма, замразена програма или когато връзка в контекстното меню сочи към несъществуващ ресурс.

Метод първи

Следвайте стъпките в последователност:



  1. Проверете списъка, който се показва за програми, които вече сте премахнали.
  2. Ако в списъка има програма, която сте премахнали, я премахнете от системния регистър. Преди да изтриете който и да е ключ на системния регистър, препоръчваме ви да създадете резервно копие на него, за да го запишете, в случай че трябва да го възстановите.

Метод втори

Алгоритъмът за втория метод, когато нямате контекстното меню на Windows 10, ще бъде следният.

  1. Отворете редактора на системния регистър, както е описано в стъпки 1–2 от предишния метод.
  2. Отворете под ключ HKEY_CLASSES_ROOT,
  3. Там ще видите няколко подсекции с имена като "name_programm.exe", "name_programm.dll". Проверете всеки един по един, като щракнете върху LMB, до подраздела "команда". Всички подраздели трябва да се отворят. Ако не се отвори, потърсете параметъра „NoOpenWith“ в дясната част на прозореца. Няма такъв параметър - създайте го. За това, което следвайте стъпките:

  1. След като намерите подраздел "команда", щракнете върху LMB, проверете наличието на параметъра "(По подразбиране)" от дясната страна. Параметърът трябва да бъде присвоен на приложението или мрежовия ресурс, съществуващ на компютъра.
  • Ако параметърът се отнася до ресурс, който вече липсва, целият раздел, започващ с името на този ресурс или програма, трябва да бъде изтрит. Не забравяйте да създадете резервно копие, преди да изтриете за възстановяване, ако е необходимо. Изтрийте, като щракнете върху името на секцията с десния бутон на мишката, след което кликнете върху „Изтриване“ - „Да“.

След приключване на двата метода контекстното меню трябва да се отвори, компютърът ще спре да замръзва, когато RMB щракне върху файла.

Не е трудно да накарате контекстното меню да работи, просто не забравяйте, че всеки опит за промяна на системния регистър може да доведе до нестабилна работа на компютъра, така че не забравяйте да създадете точки за възстановяване, архивни копия на програмите, които да бъдат премахнати. Когато десният бутон на мишката не отвори контекстното меню, следвайте инструкциите по-горе последователно, прилагайте всички методи, грешката ще бъде поправена.

Споделя това