您的位置：首页 > Web前端 > JavaScript

javascript屏蔽默认右键增加自定义事件

2014-05-22 14:56 399 查看

最近做一个web页面，需求中需要提供右键操作・・・
当然该右键操作就需要屏蔽浏览器默认的右键操作，一阵搜罗，整理如下（样式神马的就自己去定义吧）

<head>
<title>RightKeyTestPage</title>

<style>
/*右键层*/
#rightKeyDiv {
filter: alpha(opacity=80); /*IE滤镜，透明度80%*/
-moz-opacity: 0.8; /*Firefox私有，透明度80%*/
opacity: 0.8; /*其他，透明度80%*/
display: none;
width: 200px;
border: solid 1px black;
background: #808080;
cursor: pointer;
}

#rightKeyDiv ul {
list-style-type: none;
display: block;
}

#rightKeyDiv ul li {
margin-left: -25px;
}

.fieldLine {
width: 400px;
}
</style>

<script src="scripts/jquery-1.8.2.js"></script>
<script>
//屏蔽默认右键
//整个document圈闭屏蔽默认右键
$(document).bind("contextmenu", function (oEvent) {
if (!oEvent) oEvent = window.event;
if (oEvent.button == 2) {
if (document.all) window.event.returnValue = false;// for IE
else event.preventDefault();
}
});

//清除右键弹出层
//在自定义右键绑定元素之外的区域点击鼠标，隐藏弹出的右键菜单
$(document).bind("mouseup", function (event) {
if ($(event.target).parent().attr("class") != "fieldLine") {
$("#rightKeyDiv").hide();
}
});

$(function () {
//绑定自定义右键
//将右键操作绑定到input上（随你页面想绑定到哪）
$(".fieldLine input").each(function () {
bindRightKeyEvent(this)
});
});

function bindRightKeyEvent(tar) {
$(tar).live("mouseup", function (oEvent) {
//tar.onmouseup = function (oEvent) {
if (!oEvent) oEvent = window.event;
//event.button=2是右键   貌似IE8以下不支持
if (oEvent.button == 2) {
var h = oEvent.target.offsetTop //+ oEvent.target.offsetHeight;
var w = oEvent.target.offsetLeft + oEvent.target.offsetWidth;
var x = w;// oEvent.x;
var y = h;//oEvent.y;
$("#rightKeyDiv").css({ "position": "absolute", "top": y, "left": x, }).show();

//绑定右键div中按钮事件
//先解绑定在重新绑定
//避免上一右键点击元素 绑定的事件被触发
$("#rightKeyDiv").find("#up").unbind("click").bind("click", function () {
return up(tar);
});
$("#rightKeyDiv").find("#down").unbind("click").bind("click", function () {
return down(tar);
});
$("#rightKeyDiv").find("#del").unbind("click").bind("click", function () {
return del(tar);
});
$("#rightKeyDiv").find("#add").unbind("click").bind("click", function () {
return add(tar);
});

//if (document.all) window.event.returnValue = false;// for IE
//else event.preventDefault();
}
else {
$("#rightKeyDiv").hide();
}
});
}

function up(obj) {
var $pDiv = $(obj).parent();
if ($pDiv.prev(".fieldLine")) {
$pDiv.insertBefore($pDiv.prev())
}
}
function down(obj) {
var $pDiv = $(obj).parent();
if ($pDiv.next(".fieldLine")) {
$pDiv.insertAfter($pDiv.next())
}
}
function del(obj) {
var $pDiv = $(obj).parent();
if ($pDiv.attr("class") == "fieldLine") {
$pDiv.remove();
}
}
function add(obj) {
var $pDiv = $(obj).parent();
var $cloneDiv = $pDiv.clone();
$cloneDiv.insertAfter($pDiv);
var tar = $cloneDiv.find("input")[0];//jQuery对象 转为dom对象
bindRightKeyEvent(tar);//为新增元素绑定右键事件
}
</script>

</head>
<body>

<div id="editArea">
<div class="fieldLine">
<span>1</span><input />
</div>
<div class="fieldLine">
<span>2</span><input />
</div>
<div class="fieldLine">
<span>3</span><input />
</div>
</div>

<div id="rightKeyDiv">
<ul>
<li id="add">新增</li>
<li id="update">修改</li>
<li id="del">删除</li>
<li>
移动
<ul>
<li id="up">上移</li>
<li id="down">下移</li>
</ul>
</li>
</ul>
</div>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航