onmousemove鼠标事件div（HTML 层（DIV） 随鼠标事件移动）

本文目录

• HTML 层（DIV） 随鼠标事件移动
• JavaScript的div拖拽，用构造函数，在鼠标移动太快时会使onmousemove失效，怎么解决
• JavaScript onmousemove 事件
• 用js控制div跟随鼠标移动，鼠标点击后，鼠标离开，div留在当前点击的位置怎么做
• html里怎么实现鼠标放到div上后，整个div向上动一点
• 鼠标事件
• 手机端单击和鼠标经过触发什么事件
• 给DIV添加鼠标经过事件,要怎么写

HTML 层（DIV） 随鼠标事件移动

《div class="drag" rel="drag" id="drag1" style="left:30px;top:10px;" onmousedown="dargit(this,event);"》
《div class="da" 》《span class="x"》x《/span》拖动区1.《/div》
文字1
《/div》
《script type="text/javascript"》
var ey=0,ex=0,lx=0,ly=0,canDrg=false,thiso=null;//
var x, y,rw,rh;
var divs=document.getElementsByTagName("div");
for (var i=0;i《divs.length;i++){
if(divs.getAttribute("rel")=="drag"){
divs.onmousemove=function(){
thismove(this);//实时得到当前对象与鼠标的值以判断拖动及关闭区域;
}
}
}
function thismove(o){
rw=parseInt(x)-parseInt(o.style.left);
rh=parseInt(y)-parseInt(o.style.top);
document.title=rw+"=文本区域="+rh;
if(rh《=20 && rw》=180)document.title=rw+"||20*20||"+rh;//右上角20*20的关闭区域
if(rh《=20 && rw《180 )document.title=rw+"||可选||"+rh;//绝对拖动条选择区域;
}
function dargit(o,e){
thiso = o;
canDrg = true;
if(!document.all){
lx = e.clientX; ly = e.clientY;
}else{
lx = event.x; ly = event.y;
}
if(document.all) thiso.setCapture();
st(o);//置前或置后
}
document.onmousemove = function(e){
if(!document.all){ x = e.clientX; y = e.clientY; }else{ x = event.x; y = event.y; }
if(canDrg){
//if(rh《=20 && rw《180 ){//如果要设定拖动区域可以作判断
var ofsx = x - lx;
thiso.style.left = parseInt(thiso.style.left) + ofsx;
lx = x;
var ofsy = y - ly;
thiso.style.top = parseInt(thiso.style.top) + ofsy;
ly = y;
//}else{canDrg=false;}
}
}
document.onmouseup=function(){
canDrg=false;//拖拽变量设为false
if(document.all && thiso != null){
//ie下，将清捕获;
thiso.releaseCapture();
thiso = null;
}
}
function set(obj){
obj=obj.parentNode.parentNode;
if(obj.getAttribute("rel"));
//obj.style.zIndex=1;
}
function st(o){
var p = o.parentNode;
if(p.lastChild != o){
p.appendChild(o);
}
if(rh《=20 && rw》=180){
canDrg=false;
window.status=rw+"|"+rh;
if(p.firstChild == o) return;
p.insertBefore(o, p.firstChild);
}
}
《/script》

JavaScript的div拖拽，用构造函数，在鼠标移动太快时会使onmousemove失效，怎么解决

你的代码没用代码排版太杂乱，我直接把自己写的拖拽给你参考一下，这段代码只是无聊时写的，所以没写吸附和区域限制，你可以参考修改一下。使用方法在底部。

function ClickMove(id){
var _this = this;
this.ele = document.querySelector(id);
this.left = this.ele.offsetLeft;
this.top = this.ele.offsetTop;
this.ele.onmousedown = function(ev){
_this.mDown(ev);
}
}
ClickMove.prototype.mDown = function(ev){
var _this = this;
if( getComputedStyle(this.ele).position != ’absolute’ ) this.ele.style.position = ’relative’;
var eleX = ev.clientX - this.ele.offsetLeft;
var eleY = ev.clientY - this.ele.offsetTop;
document.documentElement.onmousemove = function(ev){
_this.ele.style.left = ev.clientX - eleX - _this.left + ’px’;
_this.ele.style.top = ev.clientY - eleY - _this.top  + ’px’;
}
document.documentElement.onmouseup = function(){
this.onmousemove = null;
}
}
 /*
 元素你只要给一个宽高背景就好，其他的不用给都可以。
 使用方法：写ID或者class名字
 class方式demo: var div1 = new ClickMove(’.box1’);
 id方式demo: var div1 = new ClickMove(’#box1’);
 */

JavaScript onmousemove 事件

定义和用法
onmousemove 事件会在鼠标指针移动时发生。
语法
onmousemove="SomeJavaScriptCode"
参数描述
SomeJavaScriptCode    必需。规定该事件发生时执行的 JavaScript。    
支持该事件的 HTML 标签：
《a》, 《address》, 《area》, 《b》, 《bdo》, 《big》, 《blockquote》, 《body》, 《button》, 
《caption》, 《cite》, 《code》, 《dd》, 《dfn》, 《div》, 《dl》, 《dt》, 《em》, 《fieldset》, 
《form》, 《h1》 to 《h6》, 《hr》, 《i》, 《img》, 《input》, 《kbd》, 《label》, 《legend》, 
《li》, 《map》, 《ol》, 《p》, 《pre》, 《samp》, 《select》, 《small》, 《span》, 《strong》, 
《sub》, 《sup》, 《table》, 《tbody》, 《td》, 《textarea》, 《tfoot》, 《th》, 《thead》, 
《tr》, 《tt》, 《ul》, 《var》
支持该事件的 JavaScript 对象：
onmousemove is, by default, not an event of any object, 
because mouse movement happens very frequently.
提示和注释
注释：每当用户把鼠标移动一个像素，就会发生一个 mousemove 事件。这会耗费系统资源去处理所有这些 mousemove 事件。因此请审慎地使用该事件。
实例:
下面的例子中，当用户把鼠标移动到图像上时，将显示一个对话框：
《img src="/i/eg_mouse2.jpg" alt="mouse"
onmousemove="alert(’您的鼠标刚才经过了图片！’)" /》

用js控制div跟随鼠标移动，鼠标点击后，鼠标离开，div留在当前点击的位置怎么做

var drag_ = false
var D = new Function(’obj’, ’return document.getElementById(obj);’)
var oevent = new Function(’e’, ’if (!e) e = window.event;return e’)
function Move_obj(obj) {
var x, y;
D(obj).onmousedown = function (e) {
drag_ = true;
with (this) {
style.position = "absolute"; var temp1 = offsetLeft; var temp2 = offsetTop;
x = oevent(e).clientX; y = oevent(e).clientY;
document.onmousemove = function (e) {
if (!drag_) return false;
with (this) {
style.left = temp1 + oevent(e).clientX - x + "px";
style.top = temp2 + oevent(e).clientY - y + "px";
}
}
}
document.onmouseup = new Function("drag_=false");
}
}

《div onmousedown="Move_obj(this.id)" id="dd" style="width:100px;height:100px;background:red"》《/div》

如果需要以后都留在此位置，需把当前位置的坐标保存到数据库，下次打开时读取数据加载div

html里怎么实现鼠标放到div上后，整个div向上动一点

如下示例，onmousemove就是鼠标悬浮div的时候采用d1样式，当鼠标离开就使用d2样式，margin-top就是与上面的距离，控制这个距离就能实现div向上移动的效果。

示例：

《html》
《head》
***隐藏网址***
《title》示例《/title》
《style type="text/css"》
.d1{
margin-top:100px;
border:1px solid red;
width:200px;
height:200px;
text-align:center;
line-height:200px;
}
.d2{
margin-top:80px;
border:1px solid red;
width:200px;
height:200px;
text-align:center;
line-height:200px;
}
《/style》
《/head》
《div class="d1" onMouseMove="this.className=’d2’" onMouseOut="this.className=’d1’"》这是一个示例..《/div》
《body》
《/body》
《/html》

鼠标事件

1.mousewheel鼠标滚轮事件
**获取当前滚轮的值 **

如果 值 小于 0 滚轮 往下滑
如果 值 大于0 滚轮 往上滑

1. onclick 单击事件

2.ondblclick 双击事件
当给 同一个格子 同时绑定双击和点击事件时
会触发 双击事件 必定会触发两次单击事件
ondblclick = function (){

3.oncontextmenu 鼠标右键
鼠标右键 是一个有默认功能的事件 它可以打开右键菜单

4.鼠标释放事件 onmouseup
鼠标按下不会触发 松开的时候 才会触发

5.鼠标按下事件 onmousedown

1.鼠标移入事件 一共有两种
第一种就是obmouseover 和 onmouseout
（1）鼠标移入 onmouseover

（2）鼠标移出 onmouseout

给父级绑定了事件 子级没有绑定事件
但是 当鼠标移入子级的时候 会触发 父级的事件
这种情况叫做事件冒泡

第二种 鼠标移出事件 onmouseenter 和 onmouseleave

1.鼠标移入 onmouseenter

2.鼠标移出 onmouseleave

鼠标移入移出 有两种写法
共同点： 就是鼠标移入移出的方法、、
不同的：
第一种 onmouseover 和 onmouseout 会触发事件冒泡
第二种 onmouseenter 和 onmouseleave 不会触发事件冒泡

3.鼠标移动事件 onmousemove
box.onmousemove = function (){
consoloe.log(’鼠标移动事件’)
}

鼠标的坐标 在 鼠标事件的 事件对象中保存
所以我们要获取 鼠标坐标 一般都是通过事件对象 event 获取

所有的鼠标事件 都可以 通过 事件对象来获取 鼠标坐标
但是 通常 我们都是在 鼠标移动事件中获取 和 使用 鼠标坐标

手机端单击和鼠标经过触发什么事件

一、鼠标事件
onmousedown事件，当鼠标左键按下时触发。 如：当鼠标元素boxq1上按下时，改变它的背景颜色。
varbox1 = document.getElementById("box1"); 　　box1.onmousedown=function(){ 　　box1.style.backgroundColor= ’green’; };
　　2. onmouseup事件，当鼠标左键抬起时触发。如：鼠标按下之前元素box1背景颜色为红色，当按下之后变为绿色，放开之后又变为红色。
varbox1 = document.getElementById("box1"); box1.onmousedown=function(){ 　　box1.style.backgroundColor= ’green’; }; box1.onmouseup=function(){ box1.style.backgroundColor= ’red’; };
　　3. onmousemove事件，当鼠标在元素上移动时触发。如：鼠标在元素box1上移动时，控制台输出鼠标的位置。
box1.onmousemove =function(e){varx =e.pageX;vary =e.pageY; console.log(’鼠标横坐标为：’+x+’******鼠标纵坐标为：’+y); };
　　4. onmouseenter事件，当鼠标进入元素的瞬间触发，仅在鼠标进入元素时触发。如：鼠标在进入元素box1时，元素背景颜色改为绿色。
　　　　它与onmousedown事件区别在于：后者是再按下的瞬间触发，而前者是在进入元素瞬间才触发，也就是说鼠标在元素边界上才触发。
varbox1 = document.getElementById("box1"); box1.onmouseenter=function(){ box1.style.backgroundColor= ’green’; };
　　5. onmouseleave事件，当鼠标移出元素的瞬间触发，仅在鼠标移出元素时触发，发生在元素边界。如：鼠标在进入元素box1时，背景颜色改为绿色，移出元素后又变为红色。　　
varbox1 = document.getElementById("box1"); box1.onmouseenter=function(){ box1.style.backgroundColor= ’green’; }; box1.onmouseleave=function(){ box1.style.backgroundColor= ’red’; };
　　6. onmouseover事件，当鼠标在元素之上的时候触发，只要鼠标留在元素之上就会触发，仅触发一次，不管鼠标是否移动，这是它和onmousemove的区别。如：鼠标在元素box1上时一直在控制台输入数字一。
box1.onmouseover =function(){ console.log(newDate()); };
　　7. onmouseout事件，当鼠标离开目标元素是触发，效果和原理与mouseleave没有什么区别，只是在Firefox下没有onmouseenter和onmouseleave，只能使用onmouseover和onmouseout；而在IE中便可使用onmouseennter和onmouseleave来代替前两个。
二、手机触摸事件
　　1. ontouchstart事件，触摸开始事件，当手机屏幕被触摸的瞬间触发。如：当触摸手机的瞬间输出当前触摸的位置坐标。
varbox1 = document.getElementById("box1"); box1.ontouchstart=function(e){vartouch = e.touches;varx =Number(touch.clientX);vary =Number(touch.clientY); console.log("当前触摸点的横坐标"+x+"*****当前触摸点的纵坐标"+y); };
　　2. ontouchmove事件，触摸的整个过程触发，当手指在屏幕上移动的时候触发。如：当手指在屏幕上移动的时候获取当前触摸位置。
varbox1 = document.getElementById("box1"); box1.ontouchmove=function(e){vartouch = e.touches;varx =Number(touch.clientX);vary =Number(touch.clientY); console.log("当前触摸点的横坐标"+x+"*****当前触摸点的纵坐标"+y); };
　　3. ontouchend事件，触摸结束的瞬间触发，即当手指离开屏幕时触发。如：当手指离开屏幕时，改变元素的背景颜色。
varbox1 = document.getElementById("box1"); box1.ontouchstart=function(e){vartouch = e.touches; box1.style.backgroundColor= ’green’; };
　　4. ontouchcancel事件，触摸过程被系统取消时触发，当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发ontouchcancel。一般会在ontouchcancel时暂停游戏、存档等操作。

给DIV添加鼠标经过事件,要怎么写

Jquery的写法：

$(function(){
$("div").hover(function(){
//鼠标经过的操作
},
function(){
//鼠标离开的操作
});
});