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

最新推荐文章于 2022-07-01 21:21:28 发布

iteye_19838

最新推荐文章于 2022-07-01 21:21:28 发布

阅读量110

点赞数

分类专栏： Javascript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_19838/article/details/82568408

版权

Javascript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

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  onclick="show('body')" oncontextmenu="show1()" onbeforeunload="event.returnValue='你确定离开？'">
<div onclick="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.onmousemove=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.onmousedown=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.onmouseup=function(){
	if(pressed)
		pressed=false;
}
</script>
</body>
</html>

iteye_19838

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript事件对象+鼠标拖动实例

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

扫一扫

专栏目录