3、HTML5里原生的右键菜单创建方法

阅读() @2018-10-29 18:16:06

即使是JavaScript被禁止,这些右键菜单仍然能正常显示。所以,如果你想尊重用户的选择,最好的方法是用JavaScript来创建这些菜单元素,注入到DOM元素里,这样,当JavaScript被禁止时,这些右键菜单也不显示了。

HTML5规范里有一个被大家忽略里的好东西,那就是右键菜单。HTML5里的右键菜单规范显示,程序员可以通过创建简单的HTML5menu和menuitem标记来生成右键菜单。菜单只在指定区域的右键菜单内显示。所以,你不需要再通过创建浏览器插件来实现这种效果。下面就让我来展示如何用基本的HTML标记来创建个性化的右键菜单!

代码如下:直接复制粘贴到你的编辑器,即可浏览效果。

html部分:

<!--首先我们定义一个HTML区域,给它分配一个ID,之后我们要用到这个ID:-->
<div contextmenu="mymenu">
	
</div>
<!--首先我们定义一个HTML区域,给它分配一个ID,之后我们要用到这个ID:-->
<menu type="context" id="mymenu">
	<menuitem label="跳转至百度"></menuitem>
	<menuitem label="跳转至新浪"></menuitem>
	<menu label="分享至">
		<menuitem>朋友圈</menuitem>
		<menuitem>新浪微博</menuitem>
	</menu>
</menu>

注意,这里的menu标记的ID和上面的contextmenu里的值是一致的,这样做的效果是,只有在上面的那个section区域里点击右键时才会显 示这些右键菜单。这些菜单里可以配置菜单名,菜单图标和onclick事件,用来声明它们的意义和要执行的动作。动作可以是预先定义的 JavaScript动作,或是执行inline的JavaScript代码。相同的菜单可以放到页面的多个区域,不需要重复创建。

css部分:

div{
	width:300px;
	height:500px;
	background:red;
}
微信二维码