右键删除

yl_fighting

浏览: 157315 次
性别:
来自: 北京

最近访客更多访客>>

a276666871

hegev

kitlee

wushuang5156

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

右键删除

右键菜单点击删除：

<style>
#menu:hover {
	border: 1px solid #0a246a;
    background: #b6bdd2;
}
#menu{
	border:1px solid #0a246a;
	padding:2px;
	background-color:#e8e8e8;
}
</style>

<html>
<body>
	<table>
		<tr><td>
			<select id="test" multiple="true" onmouseup="listener(event,'test')">
				<option value="0">0</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
			</select>
		</td></tr>
	</table>
	<span id="menu" style="display:none;position:absolute" onclick="delItem()">
		<img id="del" src="del.png"/>删除
		<input id="delOption" type="hidden"/>
	</span>
</body>
</html>

<script language="javascript" type="text/javascript">
function listener(oEvent,obj){
	if (!oEvent) oEvent=window.event;//IE
    if (oEvent.button==2){//2表示右键
		//获取鼠标点击位置：firefox用pageX,pageY;IE用x,y
		//设置位置时firefox不加单位无效，IE兼容，所有在变量末尾最好加上"px"
		var x = oEvent.x ? oEvent.x : oEvent.pageX;
		var y = oEvent.y ? oEvent.y : oEvent.pageY;
		document.getElementById("menu").style.left =document.body.scrollLeft+x+10+'px';
		document.getElementById("menu").style.top = document.body.scrollTop+y+10+'px';
		document.getElementById("menu").style.display = "inline";
		document.getElementById("delOption").value = obj;
	}
}

document.getElementById("test").oncontextmenu=function(event) {
	if (document.all) window.event.returnValue = false;//IE
	else event.preventDefault();//Firefox
};

function delItem(){
	menu.style.display="none";
	if(confirm("是否确认删除？")){
		//获取操作内容
		var param = document.getElementById("delOption").value;
		var parameter = document.getElementById(param);
	}else{
		return;
	}
}
</script>

遇到的问题：

1、Firefox、IE、Chrome兼容性问题，及javascript在浏览器之间的区别：

2、oncontextmenu()使用时的注意项

3、鼠标事件的内置对象event

参考：右键菜单：javascript:mctmp(0);

Javascript在Firefox、IE的区别：javascript:mctmp(0);