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

oracle_api

浏览: 207545 次
性别:
来自: 深圳

最近访客更多访客>>

jimzhao

learnschema1

atianchen

蜗牛飞

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2017-07 ( 13)
2017-06 ( 13)
2017-05 ( 22)
更多存档...

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

博客分类：

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  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>

分享到：

Javascript window 对象 + 浮动广告 | Javascript事件对象+贪吃蛇

2014-02-03 12:45
浏览 635
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

JSON数据与JavaScript对象转换

类函数， 原型对象 与 构造方法之间的关系

Javascript 识别对象的类型

Javascript 函数的特殊用法

Javascript 函数中的属性、方法和构造函数

Javascript 调用Javascript函数的四种方式

Javascript 对象序列化与反序列化

Javascript 对象的三属性

Javascript 属性的特性

属性的遍历，删除，检测

Javascript 创建对象的四种方法，类的三种属性，三种方法

Javascript window 中的其它对象

Javascript window 对象+ 父子窗口之间相互操作

Javascript window 对象 + 浮动广告

Javascript事件对象+贪吃蛇

Javascript事件操作

Javascript 获取DOM对象

Javascript 实例-- 滑动菜单

Javascript 实例--全选反选

Javascript 正则表达式

最近访客更多访客>>

类函数，原型对象与构造方法之间的关系