현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

contextmenu 속성은 폐기되었으며, 모든 브라우저에서 제거될 것입니다.

contextmenu 전역 속성은 이 요소의 컨텍스트 메뉴로 사용될 <menu>id입니다.

컨텍스트 메뉴는 마우스의 우클릭(right-click)과 같은 사용자 상호작용 중에 나타나는 메뉴를 말합니다. HTML5에서는 이 메뉴를 커스터마이징할 수 있습니다. 다음은 계층 메뉴(nested menu)를 포함한 구현 예제입니다.

Example

HTML

<body contextmenu="share">
  <menu type="context" id="share">
    <menu label="share">
      <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem>
      <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem>
    </menu>
  </menu>
  <ol>
    <li>
      Anywhere in the example you can share the page on Twitter and
      Facebook using the Share menu from your context menu.
    </li>
    <li contextmenu="changeFont" id="fontSizing">
      On this specific list element, you can change the size of the text
      by using the "Increase/Decrease font" actions from your context menu
    </li>
    <menu type="context" id="changeFont">
      <menuitem label="Increase Font" onclick="incFont()"></menuitem>
      <menuitem label="Decrease Font" onclick="decFont()"></menuitem>
    </menu>
    <li contextmenu="ChangeImage" id="changeImage">
      On the image below, you can fire the "Change Image" action
      in your Context Menu.<br />
      <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png"
          contextmenu="ChangeImage" id="promoButton" />
      <menu type="context" id="ChangeImage">
        <menuitem label="Change Image" onclick="changeImage()"></menuitem>
      </menu>
    </li>
  </ol>
</body>

JavaScript

function shareViaTwitter() {
  window.open("https://twitter.com/intent/tweet?text=" +
      "Hurray! I am learning ContextMenu from MDN via Mozilla");
}

function shareViaFacebook() {
  window.open("https://facebook.com/sharer/sharer.php?u=" +
      "https://developer.mozilla.org/en/HTML/Element/Using_HTML_context_menus");
}

function incFont() {
  document.getElementById("fontSizing").style.fontSize = "larger";
}

function decFont() {
  document.getElementById("fontSizing").style.fontSize = "smaller";
}

function changeImage() {
  var index = Math.ceil(Math.random() * 39 + 1);
  document.images[0].src =
      "https://developer.mozilla.org/media/img/promote/promobutton_mdn" +
      index + ".png";
}

Result

Specifications

Specification Status Comment
HTML Living Standard
The definition of 'contextmenu' in that specification.
Living Standard No change from latest snapshot, HTML 5.1
HTML 5.1
The definition of 'contextmenu' in that specification.
Recommendation Snapshot of HTML Living Standard, initial definition.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

522 3

Yes — 524

No9 No

392 6

Yes — 397

No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes — 521 Yes — 524 No32 — 565 No No Yes

1. Until version 52 (exclusive): this feature is behind the Enable experimental Web Platform features preference.

2. This was removed from the Enable Experimental Web Platform Features due to a Web compatibility issue. In June 2017, it was removed entirely from the browsers. This is documented in Chromium bug 87553.

3. From version 52: this feature is behind the --enable-blink-features runtime flag (needs to be set to ContextMenu).

4. Until version 52 (exclusive): this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.

5. Support for the contextmenu attribute has been removed from Firefox for Android (See bug 1424252).

6. From version 39: this feature is behind the --enable-blink-features runtime flag (needs to be set to ContextMenu).

7. Until version 39 (exclusive): this feature is behind the Enable experimental Web Platform features preference.

[1] An experimental implementation was originally available via the command line option --enable-blink-features=ContextMenu. Until Chrome 52 and Opera 39 it was additionally available by enabling the Experimental Web Platform features option, but got removed from that due to a Web compatibility issue. In June 2017, it was removed entirely from the browsers. This is documented in Chromium bug 87553.

[2] Support for the contextmenu attribute has been removed from Firefox Mobile (bug 1424252).

See also

문서 태그 및 공헌자

이 페이지의 공헌자: dolmoon
최종 변경: dolmoon,