Hantera höger musklick (oncontextmenu). Anpassad kontextmeny med JavaScript Varför öppnar inte höger musknapp menyn

Har du lagt märke till att högerklicka på bilder på vissa webbplatser inte fungerar. Det verkar som om knappen klickar i viloläge och webbläsaren inte bryr sig om det - “hänger och tänker”. I själva verket blockerar webbläsaren helt enkelt klick när den får ett sådant kommando från JavaScript-skriptet på den laddade sidan.

Hur lås upp höger knapp, så att genom att klicka på bilden, spara den för att se off-line? I de flesta webbläsare räcker det att "gräva" i de avancerade inställningarna JavaScript ... Så ...

Om du har " Opera»:
1. Följ sökvägen "Verktyg" -\u003e "Allmänna inställningar";
2. I fönstret som visas, stanna vid "Innehåll" och hitta knappen "Konfigurera JavaScript" (se figur 1).

3. Genom att klicka på det, öppna fönstret för detaljerade JavaScript-inställningar och avmarkera rutan bredvid raden "Blockera höger knapp".
Efter bekräftelse (klicka på "Ok") blir denna knapp "gratis" för samtal till snabbmenyn. Förresten, i " Firefox»För att låsa upp den högra knappen måste du avmarkera rutan bredvid ett sådant objekt (se fig. 2).

I andra avancerade webbläsare tas högerknappsblockering bort på samma sätt - genom samma avancerade JavaScript-inställningar.

Mål: att fånga höger musknapp genom att klicka i webbläsarfönstret och visa sin egen snabbmeny.

Vad händer när du högerklickar i ett webbläsarfönster? En snabbmeny kommer att visas, vars utseende och uppsättning funktioner beror på webbläsartypen och platsen där du klickade.
Men vad händer om vi ville blockera webbläsarens kontextmeny och visa vår egen? Kanske? Ja. Tyvärr inte webbläsare, men koden nedan fungerar i Gecko, Safari och IE. Opera tillhandahåller inte dessa funktioner som standard.

Låt oss först rita tre DIV, varav 2 visar vår egen sammanhangsmeny, och i den tredje lämnar vi standardwebbläsaren.

"höjd: 100px; kant: 1px fast röd; bakgrundsfärg: #FFCCCC;"> Högerklicka

"höjd: 100px; kant: 1px massivt blått; bakgrundsfärg: #CCCCFF;"> Högerklicka

"höjd: 100px; kant: 1px fast grön; bakgrundsfärg: #CCFFCC;"> Högerklicka


"position: absolut; topp: 0; vänster: 0; kant: 1px fast # 666; bakgrundsfärg: #CCC; display: ingen; flyta: vänster;">


Som du ser, fångar du högerklickning med händelsen oncontextmenu... För att skriva koden för menyfunktionen behöver du följande komponenter:
- Funktion för att lägga till eventhanterare. Används för att dölja sin egen sammanhangsmeny när du klickar på andra delar av dokumentet.
- Funktion för att bestämma koordinaterna för muspekaren. Används för att definiera positionen där vi ska visa snabbmenyn.
Du kan blockera popup-fönstret för standard-webbläsarmenyn genom att bara returnera falskt.

Nu koden:

// Funktion för att bestämma koordinaterna för muspekaren
funktion defPosition (händelse) (
var x \u003d y \u003d 0;
if (document.attachEvent! \u003d null) (// Internet Explorer & Opera
x \u003d windows.event .clientX + (document.documentElement .scrollLeft? document.documentElement .scrollLeft: document.body .scrollLeft);
y \u003d windows.event .clientY + (document.documentElement .scrollTop? document.documentElement .scrollTop: document.body .scrollTop);
) annat om (! document.attachEvent && document.addEventListener) (// Gecko
x \u003d event.clientX + windows.scrollX;
y \u003d event.clientY + windows.scrollY;
) annat (
// Göra ingenting
}
retur (x: x, y: y);
}

funktionsmeny (typ, evt) (
// Blockera bubblan i kontextmenuhändelsen
evt \u003d evt || window.event;
evt.cancelBubble \u003d sant;
// Visa vår egen sammanhangsmeny
var meny \u003d document.getElementById ("contextMenuId");
var html \u003d "";
switch (typ) (
fall 1):
html \u003d "Meny för första DIV";
html + \u003d "
Första funktionen "
;
html + \u003d "
Andra funktionen "
;
html + \u003d "
Tredje funktionen "
;
ha sönder;
fall (2):
html \u003d "Meny för den andra DIV";
html + \u003d "
(tömma)" ;
ha sönder;
standard:
// Ingenting
ha sönder;
}
// Om det finns något att visa, visa det
if (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 "";
}
// Blockera popup-fönstret för standard-webbläsarmenyn
returnera falskt;
}

// Stäng sammanhanget när du vänster- eller högerklickar på dokumentet
// Funktion för att lägga till eventhanterare
funktion addHandler (objekt, händelse, hanterare, useCapture) (
if (object.addEventListener) (
object.addEventListener (händelse, hanterare, useCapture? useCapture: false);
) annat om (object.attachEvent) (
object.attachEvent ("på" + händelse, hanterare);
) annan varning ( "Lägg till hanterare stöds inte") ;
}
addHandler (dokument, "contextmenu", funktion () (

} ) ;
addHandler (dokument, "klicka", funktion () (
document.getElementById ("contextMenuId") .style .display \u003d "none";
} ) ;

I den här handledningen tittar vi på det sällan nämnda HTML5-tricket - contextmenu. Du har kanske aldrig hört talas om en sådan meny förut, men i vissa situationer kan den vara extremt användbar.

Vad kan kontextmenyattributet vara för? Den låter dig lägga till olika alternativ till högerklicka på webbläsarens kontextmeny med bara några få rader med HTML-kod, även när Javascript är inaktiverat. Även för tillfället finns ett sådant bekvämt verktyg endast tillgängligt i Firefox.

Så här fungerar det:

Att använda kontextmeny är mycket lättare än det kan verka vid första anblicken. Du måste lägga till attribut för contextmenu:

Sedan skapar vi menyn:

ID-attributet måste matcha attributen för kontextmeny. Således är det möjligt att använda olika kontextmenyer för olika delar av sidan.

Sedan lägger vi till menyalternativ. Sätt först in ett menyalternativ med text och en ikon, lägg sedan till en länk för att sända den aktuella sidan på Facebook och slutligen infoga en länk för att uppdatera sidan. Det visar sig en snabbmeny med tre objekt:

Du kan också skapa undermenyer:

En mycket intressant och användbar HTML5-egenskap. Men användningen är begränsad endast till Firefox-webbläsaren.

Kontextmenyn är menyn som visas när du högerklickar på skärmen. Vanligtvis används dessa menyer för att göra det enklare att utföra utvalda åtgärder, till exempel att sortera mappar och filer, öppna ett nytt programfönster eller komma åt systeminställningar.

Under många år avser termen "sammanhangsmeny" främst ursprungliga applikationer. Men vi har nu möjligheten att dra nytta av det även i webbapplikationer. Ett exempel är filhanteraren i Gmil. Den här menyn implementeras med javascript-kod:

I framtiden kommer vi att kunna skapa kontextmenyer för HTML5-baserade webbplatser. Vi inbjuder dig att bekanta dig med denna strategi.

Utveckling av en sammanhangsmeny

HTML5 introducerade oss två nya element, meny och meny, och de låter dig skapa kontextmenyer. För att webbläsaren ska behandla menylementet som en "sammanhangsmeny" måste vi ställa in menytypen till kontext och också ge det ett unikt ID.

Nedan är ett exempel där vi skapar en snabbmeny med dessa egenskaper.


Redigera innehåll
E-post urval

Vi har också möjlighet att lägga till undermenyer genom att smälla menylementet på följande sätt:


Redigera innehåll
E-post urval

Facebook
Twitter


För att snabbmenyn ska visas på skärmen när vi högerklickar använder vi ett nytt HTML-attribut som heter contextmenu. Detta attribut används för att identifiera menyn med det angivna ID. Med vårt exempel ovan kan vi definiera vår kontextmeny med contextmenu \u003d context-menu-id.

Vi kan ställa in ett attribut på body-taggen om vi vill använda snabbmenyn på hela sidan. Vi kan också lägga till det i ett HTML-element så att den här menyn uteslutande används inom detta element.

En ny sammanhangsmeny visas nu under operativsystemmenyn, som visas i exemplet nedan.


Lägg till en ikon

Vi är säkra på att många av er har sett sammanhangsmenyer som använder ikoner. I vissa fall kan en ikon vara ett bra visuellt hjälpmedel för att hjälpa användare att hitta menyer. Dessutom ger det användarna möjlighet att förstå vad menyn är avsedd för.


Vi kan också lägga till en ikon till vår HTML5-sammanhangsmeny med ikonattributet:


Redigera innehåll
E-post urval

Facebook
Twitter


Det här är vad vi kommer att se i webbläsarfönstret.


Få menyn att fungera

Just nu fungerar inte vår nya kontextmeny när du klickar på den. Men vi kan mycket enkelt leva upp det med en liten javascript-kod. I vårt exempel kallas menyn E-postval. Denna meny gör det möjligt för användare att skicka vald text via e-post.

För att det ska fungera, låt oss lägga till en funktion som gör att användare kan använda kod bakom.

Funktion getSelectedText () (
var text \u003d "";
if (windows.getSelection) (
text \u003d windows.getSelection (). toString ();
) annat om (document.selection && document.selection.type! \u003d "Control") (
text \u003d document.selection.createRange (). text;
}
returnera text;
};
Sedan skapar vi en annan funktion, antar att sendEmail (), som öppnar en e-postklient. Ämnesraden är texten du angav från dokumenthuvudet och kroppen fylls med den valda texten.

Funktion sendEmail () (
var bodyText \u003d getSelectedText ();
window.location.href \u003d "mailto :? subject \u003d" + document.title + "& body \u003d" + bodyText + "";
};
Slutligen lägger vi till denna funktion till vår meny via attributet onclick.

E-post urval
Vi har tidigare visat dig hur du använder HTML5 EditableContent, vilket gör att vi kan redigera webbinnehåll direkt på sidan. Vi kan använda den här funktionen genom att lägga till den i vår meny som heter "Redigera innehåll".

Sammanfattningsvis

Personligen är vi mycket nöjda med den här nya funktionen. Vi ser många möjligheter i det. Tyvärr, när detta skrivs, är det bara Firefox som stöder den här funktionen. Förhoppningsvis kommer andra webbläsare att ansluta till det snart.

Nedan kan du se en demo (fungerar bara i Firefox).

Användbarheten för alla enheter. I händelse av misslyckanden, uppdelningar är det inte alltid nödvändigt att ringa specialister, som ibland betalar för sina tjänster till ganska höga priser. Många brister, fel kan korrigeras av dig själv. Denna typ av kraschar, fel inkluderar när höger musknapp inte öppnar snabbmenyn. Vad ska man göra i sådana fall?

Först bör du ta reda på varför felet inträffar, varför Windows 10. kontextmeny inte fungerar. Det finns flera möjliga skäl här:

  • rörigt register med föråldrade filer;
  • frånvaron av program som ingår i snabbmenyn, deras instabila arbete.

Låt oss överväga vad vi ska göra i dessa fall, hur man ändrar situationen när snabbmenyn inte öppnas med höger musknapp.

Om högerklickar på snabbmenyn inte på grund av röran i registret med föråldrade filer, rekommenderar vi att du använder ett verktyg för rengöring, till exempel Glary Utilities. Glary Utilities är en uppsättning system tweakers, verktyg som hjälper till att skydda, justera och förbättra datorns prestanda. Med hjälp av uppsättningen kan du ta bort onödiga filer som täpper systemet, registerposter som är föråldrade, optimera RAM, hantera start, optimera minne och andra funktioner som är användbara för att datorn ska fungera bra. Glary Utilities är gratis att ladda ner.


När du har ställt in inställningarna, rengör din enhet för onödiga filer med samma verktyg, rengör registret och ökar därmed hastigheten på datorn.

Frys bug fix

Om, när du högerklickar på en fil, mapp, kontextmenyn på skrivbordet inte fungerar, datorn fryser, nyckeln svarar inte på kommandon, kan du eliminera denna frysning på två sätt, rekommenderar vi att du gör båda i följd. Innan du fortsätter med någon av dem måste du ha administratörsrättigheter. Du måste arbeta med registret, här måste du vara försiktig, om du gör något fel kan systemet krascha. Se till att skapa en systemåterställningspunkt innan du raderar någonting när du startar processen för att fixa fel.

En "tråkig" hänga orsakas vanligtvis av ett instabilt program, ett fryst program eller när en länk i snabbmenyn pekar på en icke-existerande resurs.

Metod ett

Följ stegen i sekvens:



  1. Kontrollera listan som visas för program som du redan har tagit bort.
  2. Om det finns ett program i listan som du har tagit bort tar du bort det från registret. Innan du raderar någon registernyckel rekommenderar vi att du skapar en säkerhetskopia av den för att spara den om det behövs återställning.

Metod två

Algoritmen för den andra metoden, när du inte har Windows 10-sammanhangsmenyn, kommer att vara följande.

  1. Öppna registerredigeraren som beskrivs i steg 1–2 i den föregående metoden.
  2. Öppna undernyckeln HKEY_CLASSES_ROOT,
  3. Där ser du flera underavsnitt med namn som "name_programm.exe", "name_programm.dll". Kontrollera var och en genom att klicka på LMB till underavsnittet "kommando". Alla underavsnitt ska öppnas. Om den inte öppnas, leta efter "NoOpenWith" -parametern till höger i fönstret. Det finns ingen sådan parameter - skapa den. För vad som följer stegen:

  1. Efter att ha hittat underavsnittet "kommando", klicka på LMB, kontrollera närvaron av parametern "(Som standard)" på höger sida. Parametern måste tilldelas den applikation eller nätverksresurs som finns på datorn.
  • Om parametern avser en resurs som redan saknas bör hela avsnittet som börjar med namnet på den här resursen eller programmet raderas. Glöm inte att skapa en säkerhetskopia innan du raderar för återställning vid behov. Ta bort genom att klicka på namnet på avsnittet med höger musknapp och sedan klicka på "Radera" - "Ja".

Efter att ha slutfört de två metoderna bör kontextmenyn öppnas, datorn slutar frysa när RMB klickar på filen.

Det är inte svårt att få kontextmenyn att fungera, kom bara ihåg att alla försök att ändra registret kan leda till instabil drift av datorn, så glöm inte att skapa återställningspunkter, arkivera kopior av programmen som ska tas bort. När den högra musknappen inte öppnar snabbmenyn, följ instruktionerna ovan i följd, tillämp alla metoder, felet fixas.

Dela detta