JavaScript的事件对象_鼠标事件
实现拖拽一个元素
拖拽的流程：
当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
<style>
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<body>
<div id="box1"></div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var box1 = document.getElementById("box1");
//为box1绑定一个鼠标按下事件,当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
box1.onmousedown = function(event){
event = event || window.event;
//div的偏移量 鼠标.clentX - 元素.offsetLeft
//div的偏移量 鼠标.clentY - 元素.offsetTop
var ol = event.clientX - box1.offsetLeft;
var ot = event.clientY - box1.offsetTop; //为document绑定一个onmousemove事件
document.onmousemove = function(event){
event = event || window.event;
//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
//获取鼠标的坐标
var left = event.clientX - ol;
var top = event.clientY - ot; //修改box1的位置
box1.style.left = left+"px";
box1.style.top = top+"px";
}; //为document绑定一个鼠标松开事件
document.onmouseup = function(){
//当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
//取消document的onmousemove事件
document.onmousemove = null;
//取消document的onmouseup事件
document.onmouseup = null;
};
};
};
</script>
JavaScript的事件对象_鼠标事件的更多相关文章
- JavaScript的事件对象_键盘事件
用户在使用键盘时会触发键盘事件.“DOM2 级事件”最初规定了键盘事件,结果又删除了相应的内容.最终还是使用最初的键盘事件,不过 IE9 已经率先支持“DOM3”级键盘事件. 一.键码 在发生 key ...
- JavaScript的事件对象_滚轮事件
用户在使用键盘时会触发键盘事件.“DOM2 级事件”最初规定了键盘事件,结果又删除了相应的内容.最终还是使用最初的键盘事件,不过 IE9 已经率先支持“DOM3”级键盘事件. 一.键码 在发生 key ...
- javaScript事件（五）事件类型之鼠标事件
一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 四.IE事件处理程序 以上内容见javaScript事件(二)事件处理程序 五.事件对象 以上内容见javaS ...
- 简单总结焦点事件、Event事件对象、冒泡事件
每学习一些新的东西,要学会复习,总结和记录. 今天来简单总结一下学到的几个事件:焦点事件.Event事件对象.冒泡事件 其实这几个事件应该往深的说是挺难的,但今天主要是以一个小菜的角度去尝试理解一些基 ...
- js课程 5-13 js事件绑定和鼠标事件注意事项有哪些
js课程 5-13 js事件绑定和鼠标事件注意事项有哪些 一.总结 一句话总结:js代码的灵魂就是改变标签的属性和样式,就这两种. 1.js触发改的东西是哪两样? 属性和样式 2.js如何让页面用标 ...
- React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...
- (93)Wangdao.com_第二十六天_鼠标事件
鼠标事件 与鼠标相关的事件,继承了 MouseEvent 接口 分类: click 按下鼠标(通常是按下主按钮)时触发. mousedown 首先触发,mouseup 接着 ...
- 常用MouseEvent鼠标事件对象&KeyboardEvent键盘事件对象&常用键盘码
MouseEvent鼠标事件对象: e.target //=> 事件源(操作的是哪个元素) e.clientX e.clientY //当前鼠标触发点距离当前窗口左上角的X|Y轴坐标 e.pag ...
- css3 pointer-events 让对象如透明般直接响应下层对象的鼠标事件
引用:http://www.css88.com/book/css/properties/user-interface/pointer-events.htm 语法: pointer-events:aut ...
随机推荐
- 第十二届浙江省大学生程序设计大赛-Capture the Flag 分类： 比赛 2015-06-26 14:35 10人阅读 评论(0) 收藏
Capture the Flag Time Limit: 2 Seconds Memory Limit: 65536 KB Special Judge In computer security, Ca ...
- c#代码画图
说明:此示例代码在我做的一个项目中 不过还是可以学习一下 一:直角坐标系显示数据 先看效果图:
- UpdatePane中弹出框
ScriptManager.RegisterClientScriptBlock(this.UpdatePanel21, typeof(UpdatePanel), "提示",&quo ...
- n条直线最多能将一个平面分成多少部分？
f(n)=n(n+1)/2+1 原理:第N条直线可以被前N-1条直线分为N段,对于 每1段则将平面分为两份,所以对于前 f(n)=f(n-1)+n. f(n-1)=f(n-2)+n-1 ...... ...
- 转载-python学习笔记之文件I/O
Python 文件I/O 本章只讲述所有基本的的I/O函数,更多函数请参考Python标准文档. 打印到屏幕 最简单的输出方法是用print语句,你可以给它传递零个或多个用逗号隔开的表达式.此函数把你 ...
- xcode下载地址
本帖最后由 tsingjun 于 12/9/20 04:46 PM 编辑 Xcode 4.4.1正式版下载地址 http://kuai.xunlei.com/d/UXZFTWONQLUD XCode ...
- CentOS6.6系统源代码安装mysql5.5.28教程（附源码包下载地址）+sysbench的安装
mysql从5.5版本开始,不再使用./configure编译,而是使用cmake编译器,具体的cmake编译参数可以参考mysql官网文档(※ 非常重要) http://dev.mysql.com/ ...
- 如何在Ubuntu/CentOS上安装Linux内核4.0
大家好,今天我们学习一下如何从Elrepo或者源代码来安装最新的Linux内核4.0.代号为‘Hurr durr I'm a sheep’的Linux内核4.0是目前为止最新的主干内核.它是稳定版3. ...
- 不同分辨率的LCM进行兼容
1．读取不同LCM ID的时序不同,如何处理? 2．开机后android会自动resize图片资源的大小,但开机logo无法自行resize,如何操作?保证识别到不同分辨率的LCM后开机logo可以正 ...
- C#支持文件拖拽
private void listBox1_DragEnter(object sender, DragEventArgs e) { if (e.Data.GetDataPresent(DataForm ...