HTML contextmenu属性用法及代码示例

HTML 上下文菜单属性是一个全局属性，将用于定义元素的context-menu栏。 contextmenu 属性的值必须与ID<menu> 元素的。

所以本质上，上下文菜单似乎取决于用户关系，例如当用户right-clicks在元素上时。众所周知，HTML5 允许我们自定义此菜单。以下是一些实现示例，包括嵌套菜单。

注意： HTML 上下文菜单属性是不支持在HTML5.

用法:

<element contextmenu="menu_id">

属性值：它包含值menu_id 它表示要打开的 <menu> 元素的 id。

HTML contextmenu 属性示例

例子：下面的 HTML 代码说明了使用上下文菜单属性。

HTML


<!DOCTYPE html>
<html>
<head>
    <title>HTML contextmenu attribute </title>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>HTML contextmenu attribute</h2>
        <div style="background:green;border:2px solid
                    #black;padding: 10px;" 
             contextmenu="geeks">
            <p>A Computer Science Portal for Geeks</p>
            <menu type="context" id="geeks">
                <menu label="Share on...">
                    <menuitem label="Twitter"
                              onclick=
"window.open('//twitter.com/intent/tweet?text=' + window.location.href);">
                    </menuitem>
                    <menuitem label="Pinterest"
                              onclick=
"window.open('http://pinterest.com/pin/create/button/?url=' + window.location.href);">
                    </menuitem>
                </menu>
                <menuitem label="Email This Page"
                          onclick=
"window.location='mailto:?body='+window.location.href;">
                </menuitem>
            </menu>
        </div>
        <p>A Computer Science Portal for Geeks</p>
        <hr>
        <p>Right click on green div and see the menuitem
    </center>
</body>
</html>

输出：

HTML 上下文菜单属性

支持的浏览器：

HTML contextmenu 属性不再支持任何浏览器。

相关用法

注：本文由纯净天空筛选整理自ManasChhabra2大神的英文原创作品 HTML contextmenu Attribute。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。