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 ...
随机推荐
- poj1703 Find them, Catch them
并查集. 这题错了不少次才过的. 分析见代码. http://poj.org/problem?id=1703 #include <cstdio> #include <cstring& ...
- https协议操作
在伪静态中加入下列代码 <IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{SERVER_PORT} 80 RewriteRul ...
- 浅谈CSS样式png、gif、jpg图片优化的方法
一.PNG.GIF.JPG图片对比 在我们进行图像优化技术前,需要学习有关的图片格式的一些技术细节,每个图形格式都有自己的优势和拖弱点,知道他们会使你得到更好的视觉质量和压缩品质. 网页图片优化是网页 ...
- 2016年11月1日 星期二 --出埃及记 Exodus 19:17
2016年11月1日 星期二 --出埃及记 Exodus 19:17 Then Moses led the people out of the camp to meet with God, and t ...
- codevs1297 硬币
1297 硬币 题目描述 Description 我们知道即使是同一种面值的硬币,它们的重量也有可能不一样,因为它受到许多因素的影响,包括制造工艺和流程上的.但是任何一种面值的硬币的重量总是处于某 ...
- linux下如何安装配置redis及主从配置
redis的优点:支持主从备份,操作指令丰富,支持异步的数据持久化 将 redis 安装到 /usr/local/webserver/redis 1.下载安装包 wget http://redis.g ...
- 如何从MySQL官方Yum仓库安装MySQL5.6
(一),2013年10月,MySQL开发团队正式宣布支持Yum仓库,这就意味着我们现在可以从这个Yum库中获得最新和最优版的MySQL安装包.本文将在一台全新安装的CentOS6上安装MySQL5.6 ...
- #utf-8与gbk转换 #bytes 和str 的转换
#!/user/bin/env python # -*- coding:utf-8 -*- temp = "连接" temp_unicode = temp.decode('utf- ...
- 11个让你吃惊的 Linux 终端命令
原文:http://linux.about.com/od/commands/tp/11-Linux-Terminal-Commands-That-Will-Rock-Your-World.htm 作者 ...
- shell 标出输入、标准输出、错误输出
shell中可能经常能看到:>/dev/null 2>&1 eg:sudo kill -9 `ps -elf |grep -v grep|grep $1|awk '{print ...