Javascript事件对象+鼠标拖动实例

window.event
属性:
1.srcElement 获取事件源
2.keyCode 获取键盘信息
3.clientX, clientY, 鼠标相对于窗口左上角的坐标
4.screenX,screenY  鼠标相对于屏幕左上角的坐标
5.returnValue  事件返回值
6.cancelBubble 阻止事件传播到包容对象。例如当body和div同时定义了onclick事件时,可组织对div的onclick传播到body(赋值为true)。

实例1

<body  οnclick="show('body')" οncοntextmenu="show1()" οnbefοreunlοad="event.returnValue='你确定离开?'">
<div οnclick="show('div')">aaa</div>

<script>
function show(str){
	alert(str);
	if(str=='div')
		event.cancelBubble=true; //阻止继续弹出'body'
}
function show1(){
	alert("禁止使用右键!");
	event.returnValue=false;
}
</script>
</body>


实例2 鼠标拖动实例

<html>
<head>
<style>
#one{
	width:120px;
	height:20px;
	position:absolute;
	background:#666;
	text-align:center;
	color:white;
}
</style>
</head>
<body>
<div id="one" style="left:10px;top:10px">drag me</div>

<script>
var one = document.getElementById('one');
var pressed = false;
var cx =0;
var cy =0;

document.οnmοusemοve=function(e){ 
//firefox的event对象要通过函数中的参数获取,而IE可以在window对象中获取
 	if(pressed){
		var ev=e || window.event;
		one.style.left=ev.clientX-cx;
		one.style.top=ev.clientY-cy;
	}
}

one.οnmοusedοwn=function(e){
	var ev=e || window.event;
	if(!pressed){
		pressed=true
		cx=ev.clientX-parseInt(one.style.left);
		cy=ev.clientY-parseInt(one.style.top);
	}
}

one.οnmοuseup=function(){
	if(pressed)
		pressed=false;
}
</script>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq_26182553

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值