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 ...
随机推荐
- （jdbc）取得数据库自动生成的主键方法
一些类,在前面的博客中有,就不重复了 public class Test2 { TestDAO t=new TestDAO(); /*前提是数据表的主键是自动增加的, *取得数据库自动生成的主键 * ...
- 2013年江西理工大学C语言程序设计竞赛（高级组）
A 解法:dfs搜索,注意一个剪枝,否则会超时(听说原本是个dp)? #include<stdio.h> //#include<bits/stdc++.h> #include& ...
- 控制窗口不能拖拉出主窗口 Dialog And Window
/* 控制窗口不能拖拉出主窗口(覆写) */var easyuiPanelOnMove = function(left, top) { if ($(this).panel('options').reS ...
- linux（centos）下SVN服务器如何搭建
检测是否符合pptp的搭建环境的要求 使用下面的指令: 123 cat /dev/net/tun如果这条指令显示结果为下面的文本,则表明通过:cat: /dev/net/tun: File descr ...
- dubbo模块组织方式
dubbo源码版本:2.5.4 阿里通过maven将dubbo的36个模块组织成了一个项目,各个模块结构如下: -------------------------------------------- ...
- profile、bashrc、bash_profile之间的区别和联系
/etc/profile:此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行.并从/etc/profile.d目录的配置文件中搜集shell的设置. 英文描述为: # /etc/pr ...
- BFC——一个我们容易忽视掉的布局神器
今天给大家说说BFC这个概念,在说概念前,先给大家看个例子: 首先,定义三个div块元素 效果: 我们发现,块级元素的排列顺序是从上往下,一块接着一块,在w3c中,是这样解释block-lev ...
- Java_你应该知道的26种设计模式
四. 模板方法模式 Definition: Define the skeleton of an algorithm in an operation, deferring some steps to s ...
- Know How To Use ID_NULL Function To Search An Object In Oracle Forms
ID_NULL built in function is used to determine that an object type variable is null or not null in O ...
- 基础！winForm客户端最常用的几个基本属性
客户端应用程序 - 是需要安装在用户电脑上才可以使用的程序特点:不需要联网也可以打开使用部分功能但是现在的情况是许多功能依然需要互联网的支持 代码部分在用户电脑上执行 WinForm常用窗体属性: 布 ...