Js实现自定义右键行为
自定义右键行为（通过事件对象获得鼠标的坐标(x,y)）
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<style type="text/css">
html{
height:100%;
}
body{
height:100%;
}
#mydiv{
width:300px;
height:300px;
background-color: #ff7400;
}
#ctxMenu{
background-color: #ff7400;
list-style-type: none;
position: absolute;
padding:0px;
border:1px solid #000;
visibility: hidden;
}
</style>
</head>
<body>
<div id="mydiv"></div>
<h2 id="show"></h2>
<input type="text"id="txt"><span id="help"></span>
<ul id="ctxMenu">
<li>上传</li>
<li>下载</li>
<li>新建</li>
<li>取消</li>
</ul>
<script type="text/javascript">
var $=function(id){
return document.getElementById(id);
};
var h2=$("show");
var ctx=$("ctxMenu");
var txt=$("txt");
var help=$("help");
/*
txt.onfocus=function(){
help.innerHTML="请输入金额";
}
txt.onkeydown=function(event){
help.innerHTML="";
var code=event.keyCode;
if(!(code>=48&&code<=57||code>=96&&code<=105||code==46||code==8||code==13||code==37||code==39||code==110||code==190)){
event.preventDefault();
}
}
*/
document.body.oncontextmenu=function(event){
event.preventDefault();
var x=event.pageX;
var y=event.pageY;
ctx.style.left=x+"px";
ctx.style.top=y+"px";
ctx.style.visibility="visible";
}
document.body.onclick=function(){
ctx.style.visibility="hidden";
}
/*
document.body.onmousemove=function(event){
var x=event.pageX;
var y=event.pageY;
h2.innerHTML=x+":"+y;
}
*/
window.onbeforeunload=function(){
var v=$("txt").value;
if(v){
return "";
}
}
$("mydiv").onclick=function(){
$("show").innerHTML="click";
};
$("mydiv").ondblclick=function(){
$("show").innerHTML="dblclick";
};
$("mydiv").onmouseover=function(){
$("show").innerHTML="mouseover";
this.style.backgroundColor="#2d2d2d";
};
$("mydiv").onmouseout=function(){
$("show").innerHTML="mouseout";
this.style.backgroundColor="pink";
}
</script>
</body>
</html>
以上就是本文给大家分享的全部内容了，希望大家能够喜欢。
请您花一点时间将文章分享给您的朋友或者留下评论。我们将会由衷感谢您的支持！
相关推荐
-
javascript自定义右键弹出菜单实现方法
本文实例讲述了javascript自定义右键弹出菜单实现方法.分享给大家供大家参考.具体实现方法如下: <head runat="server"> <title>无标题页</title> <script type="text/javascript"> var oPopup = window.createPopup(); function PopMenu(id) { var oPopBody = oPopup.docum
-
JS简单实现自定义右键菜单实例
RT,一个简单的例子,仅仅讲述原理 复制代码 代码如下: <div id="menu" style="width: 0;height: 0;background: cadetblue;position: absolute"></menu> 假设我要把上面这个div设置为右键菜单,先随意美化一下. 原理就是利用contextmenu事件,右键点击时,会触发这个事件时,该事件对象可以获得鼠标距离页面左上角的距离clientX和clientY, 我
-
JS实现的自定义右键菜单实例二则
本文实例讲述了JS实现的自定义右键菜单.分享给大家供大家参考.具体如下: 示例1: 运行效果截图: 具体代码如下: <!DOCTYPE html> <html> <head> <title>JS实现自定义右键菜单</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script src=&
-
javascript鼠标右键菜单自定义效果
本文实例讲解了javascript鼠标右键菜单的实现方法,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <meta charset="gb2312" /> <title></title> <style> #menu{ border:solid 1px gray; width:100px; display:none; position:absolute; background-
-
js自定义鼠标右键的实现原理及源码
今天来记录下js来自定义鼠标右键,同样先来分解下它的实现原理: 1.屏蔽右键默认事件:(一度我以为修改的就是默认事件) 2.对一个ul的隐藏:(这个我也曾迂腐的认为值得这样操作的都是div,汗) 3.对鼠标点击右键做出的响应,显示隐藏的ul: 4.鼠标重新点击后,ul重新被隐藏 这样来看的话,我们需要做的事情是不是就简单了很多,先上代码: html部分 <ul id="testRight" style="width: 100px;background-color: ye
-
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
本文实例讲述了js实现完全自定义可带多级目录的网页鼠标右键菜单方法.分享给大家供大家参考.具体分析如下: 这是很不错的一个网页鼠标特性,这个代码可以控制网页中鼠标的右键菜单,完全按照你的意思打造,可以带多级的目录显示. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
-
js实现右键自定义菜单
本文实例为大家分享了右键自定义菜单的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #menu { height: 200px; width: 50px; border: 1px solid gray; back
-
JavaScript 对任意元素,自定义右键菜单的实现方法
一.一些概念: 1.鼠标事件有一个botton属性:返回一个整数,用于表示点击的是哪个鼠标按键. BUG:在IE和标准DOM的鼠标事件中,唯一一个button属性值相同的是"单击右键"事件,都返回2. 2.事件onmousedown:表示鼠标按键按下的动作. 事件oncontextmenu:点击鼠标触发的另一个事件. 3.中断默认事件处理函数的方法:IE中设置returnValue=false; 标准DOM中调用preventDefault()方法. 4.事件对象:①在IE中,事件对
-
Js实现自定义右键行为
自定义右键行为(通过事件对象获得鼠标的坐标(x,y)) <!doctype html> <html> <head> <meta charset="UTF-8"> <title>demo</title> <style type="text/css"> html{ height:100%; } body{ height:100%; } #mydiv{ width:300px; heigh
-
js实现自定义右键菜单
本文实例为大家分享了js实现右键菜单的具体代码,供大家参考,具体内容如下 原理: 1.屏蔽默认的右键菜单 2.点击右键获取位置,让自定义菜单到点击位置上 3.点击左键,自定义菜单消失 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>右键菜单练习</title> <style> *{
-
原生js自定义右键菜单
本文实例为大家分享了js自定义右键菜单的具体代码,供大家参考,具体内容如下 1.右键菜单触发的基本过程 实现自定义右键菜单我们首先需要了解以下内容: 浏览器默认的右键菜单触发的基本过程 1).单击右键,菜单出现 2).菜单出现,鼠标箭头一直在菜单左上角 3).再换个位置点击右键,原菜单消失,新菜单出现在指定位置 4).点击左键,中键,菜单消失 以上为大致实现过程,不全面,仅供参考 也许文字过于抽象,我们来看看代码吧: 2.HTML结构 <!--start右键菜单的结构--> <div i
-
JS自定义右键菜单实现代码解析
今天来讲一个关于右键菜单的小demo,抛砖引玉. 首先,我们要用css和html做一个自定义右键菜单. <!--自定义右键菜单html代码--> <div id="menu"> <div class="menu">功能1</div> <div class="menu">功能2</div> <div class="menu">功能3</di
-
jquery实现在网页指定区域显示自定义右键菜单效果
本文实例讲述了jquery实现在网页指定区域显示自定义右键菜单效果.分享给大家供大家参考.具体如下: 这是一个jquery实现的网页右键菜单效果,与其它自定义的右键菜单不同之处在于,本菜单只在指定区域内才有效,若超出指定区域的话,点击右键后显示的仍是浏览器的右键菜单.运行效果后,请在橘色区域内点击鼠标右键,会弹出一个带图标的自定义右键菜单,和浏览器的右键菜单完全不一样哦! 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-web-ar
-
jQuery实现自定义右键菜单的树状菜单效果
本文实例讲述了jQuery实现自定义右键菜单的树状菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery的自定义右键菜单,在树状结构的子节点(下级没有节点)上单击右键才会弹出自定义菜单,而且菜单是自动根据鼠标位置来定位的.当鼠标在菜单以外的任意空白处单击一下后会自动消失.这里想特别说明一点所谓的"菜单以外",可以有两种解剖方式--1.除了鼠标在菜单区域内的所有位置:2.如下图所示的A.B.C.D四个区域.显然用第一种方法来剖析会更简单直接一点.源码中的!IsInArea就
-
javascript自定义右键菜单插件
本文实例为大家分享了javascript自定义右键菜单插件的具体代码,供大家参考,具体内容如下 1.使用方式 js文件引入<script src="RightMenu.js"></script> 初始化: let rightMenu = new RightMenu({ targetId:'menu',//需要改变右键菜单的元素id menuItems: items//菜单项数据,json数组 }) 2.menuItems参数 items = [ { id: 'a
-
vue中自定义右键菜单插件
前言: 作为一个刚刚入门前端的搬砖工作者,写博客只是为了能够记录自己因为业务使用过的一些插件,为了后续更好的使用和改造 本文分享了vue中自定义右键菜单插件的具体代码,供大家参考,具体内容如下 演示 用法 通过npm安装插件 npm i vue-context -S 在main.js中引入并注册 import Vue from 'vue'; import VueContext from 'vue-context'; new Vue({ components: { VueContext
-
Flex自定义右键菜单具体实现
1.自定义右键菜单注册类: 项目中新增注册类 RightClickManager,代码如下: 复制代码 代码如下: package com.siloon.plugin.rightClick { import flash.display.DisplayObject; import flash.display.InteractiveObject; import flash.events.ContextMenuEvent; import flash.events.MouseEvent; import