js--事件对象的理解5-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拖曳</title>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1'); var disX=0;
var disY=0; oDiv.onmousedown=function (ev)
{
var oEvent=ev||event; disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop; document.onmousemove=function (ev) //document.onmousemove 给document加事件，防止鼠标快速拖动时 ，鼠标不在移动区域。
{
var oEvent=ev||event;
var l=oEvent.clientX-disX; //左边距变量
var t=oEvent.clientY-disY; //右边距变量 if(l<0)
{
l=0;
}
else if(l>document.documentElement.clientWidth-oDiv.offsetWidth) //页面的可视区大小-div的left值=div左边距距离
{
l=document.documentElement.clientWidth-oDiv.offsetWidth;
} if(t<0)
{
t=0;
}
else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
{
t=document.documentElement.clientHeight-oDiv.offsetHeight; //页面的可视区高度-div的top值=div上边距距离
} oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
}; document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
}; return false; //阻止火狐 二次拖曳出禁止符号的 默认事件
};
}; //浏览器重置的时候 会有问题，在BOM onresize时补充
</script>
</head> <body>
<div id="div1"></div>
</body>
</html>
js--事件对象的理解5-的更多相关文章
- JavaScript学习06 JS事件对象
JavaScript学习06 JS事件对象 事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型.鼠标坐标等. 事件对象的属性:格式:event.属性. 一些说明: event代表事件的状 ...
- JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习
JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习 btn.onclick = function(event) { 语句 } 其中event就是事件对象,在这个方法中指向的对象是onc ...
- JS—事件对象
在触发DOM上的某个事件时,会产生一个事件对象event.这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息. 举例鼠标操作导致的事件对象中,会包含鼠标位 ...
- JS事件对象与事件委托
事件对象 包含事件相关的信息,如鼠标.时间.触发的DOM对象等 js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: document.getElementsByTa ...
- JS 事件对象和事件冒泡
1.事件对象 js的事件对象中保存了当前被触发事件的一些相关的属性信息,如事件源.事件发生时的鼠标位置.事件按键等. 事件对象的获取方法: IE中可以window.event直接获取,而Firefox ...
- JS:事件对象1
一,this关键字和上下文 var box = document.getElementById("box");. 普通的函数如果没有给他传递参数,函数本身是没有参数的. test( ...
- js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象
事件对象 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...
- js事件对象
哎,事件也有对象呦.程序员一直在讲对象对象,那么,过年是不是该带个对象回家呢?好了,既然事件有对象,承认这个事实吧!哈哈,那么,其就有属性,接下来,就放个 例子来讲讲,顺便把常用的属性也添加进去.. ...
- js 事件对象
/* 事件绑定的格式: 元素节点.on + 事件类型 = function(){ } 元素节点 事件类型 on+事件类型:事件处理函数 [注]上述三者一绑定:生成一个新的事件对象. [注]触发事件以后 ...
- js 事件对象event
在触发DOM上的某个事件时,会产生一个事件对象event.这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息. <body> <a hr ...
随机推荐
- leetcode & lintcode for bug-free
刷题备忘录,for bug-free leetcode 396. Rotate Function 题意: Given an array of integers A and let n to be it ...
- B+树概念学习
转载自 从B树.B+树.B*树谈到R 树 1.用阶定义的B树 B 树又叫平衡多路查找树.一棵m阶的B 树 (注:切勿简单的认为一棵m阶的B树是m叉树,虽然存在四叉树,八叉树,KD树,及vp/R树/R* ...
- 何为PostgreSQL？
PostgreSQL 是以加州大学伯克利分校计算机系开发的 POSTGRES, Version 4.2 为基础的对象关系型数据库管理系统(ORDBMS).POSTGRES 领先的许多概念只是在非常迟的 ...
- python第四天
浏览器与Server交互: import socketdef handle_request(client): buf = client.recv(1024) client.send('HTTP/1.1 ...
- hdu1722
链接 一份切成q份需要q刀,切成p份需要p刀:切的部分总会有重复,即gcd(p,q),减去重复部分就是要切的刀数 #include<stdio.h> int gcd(int n,int m ...
- Ubuntu14.04 bind9配置
apt-get install bind9 配置域名: cn.archive.ubuntu.com 对应IP: 10.60.233.244 vim /etc/bind/name.conf.defaul ...
- URL中的#
作者:阮一峰 http://www.ruanyifeng.com/blog/2011/03/url_hash.html 一.#的涵义 #代表网页中的一个位置.其右面的字符,就是该位置的标识符.比如 ...
- 利用css来让一个div在页面中垂直居中的方法
一.如何让一个div在页面中垂直居中(请至少列出三种) 1.距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就 ...
- Python_Selenium2Library源码分析
I. Introduction Selenium2Library是robot framework中主流的测试网页功能的库, 它的本质是对webdriver的二次封装, 以适应robot框架. 百度上一 ...
- Office下载地址
文件名cn_office_professional_plus_2016_x86_x64_dvd_6969182.isoSHA1277926A41B472EE38CA0B36ED8F2696356DCC ...