html鼠标自定义右键菜单:css+js实现自定义html右键菜单

时间: 2018-01-05阅读: 2567标签: html

我们在网页中很多都有右键菜单的功能,一般点击右键显示的是浏览器默认的菜单选项,那么我们直接如何通过css+js实现html的右键菜单呢?这篇文章将讲解html鼠标自定义右键菜单的实现原理和实现代码。


实现原理

在HTML中基本上每个对象都有一个oncontextmenu事件,这个事件就是鼠标的右键单击事件(onclick事件是鼠标的左键单击事件),我们可以监听oncontextmenu事件,阻止默认的浏览器右键菜单e.preventDefault();然后显示我们想要显示的菜单信息,当我们单击其中某一项的时候,就执行我们设定的动作,然后将弹出窗口关闭。


实现代码

css代码:

<style>
html,body{
    width : 100%;height : 100%; margin: 0;padding: 0;
}
#menu{
    width : 100px;
    padding: 10px;
    border : 1px solid #ddd;
    visibility : hidden;
    position : absolute;
}
</style>


html代码:

<body id="container">
	<div id="menu">
	    <a href="javascript:history.back();">后退</a>
	    <hr/>
	    <a href="javascript:history.back();">前进</a>
	</div>
</body>


js代码:

<script>      
window.oncontextmenu=function(e){
    e.preventDefault();//取消默认的浏览器自带右键 
    var evt = window.event || arguments[0];
    var menu=document.getElementById('menu');//获取右键菜单
    var container = document.getElementById('container');//获取区域
    /*获取当前鼠标右键按下后的位置,据此定义菜单显示的位置*/
    var rightedge =container.clientWidth-evt.clientX;
    var bottomedge =container.clientHeight-evt.clientY;
    console.log(container.clientHeight);
    /*如果从鼠标位置到容器右边的空间小于菜单的宽度,就定位菜单的左坐标(Left)为当前鼠标位置向左一个菜单宽度*/
    if (rightedge < menu.offsetWidth){             
        menu.style.left = container.scrollLeft + evt.clientX - menu.offsetWidth + "px";            
    }else{ /*否则,就定位菜单的左坐标为当前鼠标位置*/
        menu.style.left = container.scrollLeft + evt.clientX + "px";
    }
    /*如果从鼠标位置到容器下边的空间小于菜单的高度,就定位菜单的上坐标(Top)为当前鼠标位置向上一个菜单高度*/
    if(bottomedge < menu.offsetHeight){
        menu.style.top = container.scrollTop + evt.clientY - menu.offsetHeight + "px";
    }else{/*否则,就定位菜单的上坐标为当前鼠标位置*/ 
        menu.style.top = container.scrollTop + evt.clientY + "px";
    }
    /*设置菜单可见*/
    menu.style.visibility = "visible";     
}

window.onclick=function(e){//关闭右键菜单
 	document.getElementById('menu').style.visibility = 'hidden'; //用户触发click事件就可以关闭了,因为绑定在window上,按事件冒泡处理,不会影响菜单的功能
}
</script>


这是个简单例子,由于contextmenu事件支持所有 HTML 元素,这意味者你可以给不同的元素,自定义不同的右键菜单,由于contextmenu事件会冒泡传播,子节点上触发的事件,在父节点上也会触发,所以应该调用对应的函数或者设置对应的属性值来阻止事件冒泡。


吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

链接: http://www.fly63.com/article/detial/327

html包含html文件的方法

我们在写asp页面的时候,常常使用include命令来包含公共文件。由于这个方法用起来非常方便,于是很多人在HTML页面里尝试使用include,但是发现根本就不起作用

什么是XHTML?

XHTML代表可扩展超文本标记语言(eXtensible HyperText Markup Language),是一种标记语言,表现方式与超文本标记语言(HTML)类似,不过语法上更加严格。XHTML是基于可扩展标记语言(XML),由万维网联盟(W3C)开发

html5和html的区别

html5是对html的第五次重大修改。HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准!html5继承了html所有的语法,同时html5也会增加一些新的特性

了解HTML及运行原理

HTML(HyperText Marked Language)即超文本标记语言,是一种用来制作超文本文档的简单标记语言。我们在浏览网页时看到的一些丰富的影像、文字、图片等内容都是通过HTML表现出来的

HTML发展历程

HTML是超文本标记语言的缩写,不同于C或JAVA等编程语言,HTML由标签组成。通过标签可以在网页中插入文字、图片、链接、音频、视频等元素,进而描述网页。和Windows一样,随着技术的发展,HTML经历了多次版本更新

VSCode中快捷输入HTML代码

VSCode中有一些快捷编辑HTML的方法,能大大提高工作效率,在这记录一些。文是在VSCode下编写的,其他编辑器如Atom、Sublime Text都支持Emmet

HTML的Doctype

<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前。告知浏览器的解析器,用什么文档类型 规范来解析这个文档。DOCTYPE不存在或格式不正确会导致文档以混杂(兼容)模式呈现。

在html中做嵌套页面_客户端实现html页面的嵌套

如何在客户端利用html、或js将一个html页面嵌套在另一个页面中,这篇文章主要讲解以下几种方式:IFrame引入 、<object>方式、Behavior的download方式 、使用JQuery的load方法

KeyPress 和KeyDown 、KeUp之间的区别

input 框在输入查询内容之后,按回车键居然有两种不同的表现形式(input 框没有绑定键盘事件),谷歌和火狐功能正常,但IE在按了回车键以后居然自动调用方法。

你可能从未听说过的15种HTML元素方法!

我们来讨论HTML和DOM之间的区别。显然,一个普通<table>元素就是HTML。您可以在.html的文件中使用它。它有一组属性影响它的外观和行为方式。这就是HTML,不过它与JavaScript无关。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全