<JavaScript>使用onmousemove事件实现移动(拖拽)div 出现的关于offsetX的问题
出现的问题如下图所示(截屏看不出来看log)
再移动鼠标的过程中会不断的出现异常值导致拖动的div不断切换位置,回到左上角。
我以为是冒泡机制导致的所以添加了下面一段阻止冒泡,随便也阻止了默认事件,但是并没有效果
ev.preventDefault();
if (ev.stopPropagation) { ev.stopPropagation(); }else{ ev.cancelBubble = true; }
原因就是offsetX 和offsetY:
发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标.
mousemove事件触发的事件源元素在不断切换,当鼠标移动时会移动到div中这时 offset的源元素不再是父级的div而是移动的div 这是offset值是相对于移动的div 所以是较小的值 ,所以会回到左上角。
原因知道了就解决吧
1。不用offset 还不行吗我用 clientX 稳稳的没问题,百度上所有关于这个问题都是用clientX (相对于浏览器视口)可是这肯定不是最完美的解决方法啊 ,要是整个外层div是居中的 还得计算一下clientX和 相对于外层div的差值。坚决不用啊!!!
2. 不用clientX 有个小伙伴提议加一个判断 if(ev.target==外层div){ 执行赋值 } 这样就可以了啊 判断一下事件源是外层还是内层,但是问题又出现了,这样当是内层的时候会不执行也就是会一卡一卡的,我想用这个做小游戏 一卡一卡这怎么能行呢!!
3.当我快要绝望的时候,我找到了 一个css的样式 pointer-events: none; 这个属性除了指示该元素不是鼠标事件的目标之外,值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。这样就不会出发触mousemove事件了。
完美解决
下面贴上实验的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#wrap{
width: 600px;
height: 600px;
border: 1px solid black;
/*background: url(./img/a.png);*/
}
.myPlane{
width: 66px;
height: 82px;
/*pointer-events: none;*/
/*background: url(./img/a.png);*/
border: 1px solid black;
position: absolute;
/*top: 480px;
left: 50%;
transform: translate3d(-50%,0,0);*/
}
</style>
</head>
<body>
<div id="wrap">
</div>
<script type="text/javascript">
var wrap = document.getElementById("wrap");
// wrap.onclick = function(){
// wrap.style.background = "url(./img/ba.png)";
// }
createMyplane();
function createMyplane (){
var myPlane = document.createElement("div");
myPlane.className= 'myPlane';
wrap.appendChild(myPlane);
move(myPlane);
}
function move(obj) {
wrap.onmousemove = function (e) {
var ev = e || window.event;
ev.preventDefault();
if (ev.stopPropagation) {
ev.stopPropagation();
}else{
ev.cancelBubble = true;
}
var currount_X = ev.offsetX;
var currount_Y = ev.offsetY;
console.log("x:"+ currount_X +" y:"+ currount_Y);
obj.style.top = currount_Y + 'px';
obj.style.left = currount_X + 'px';
}
}
</script>
</body>
</html>
<JavaScript>使用onmousemove事件实现移动(拖拽)div 出现的关于offsetX的问题的更多相关文章
- 理解事件捕获。在限制范围内拖拽div+吸附+事件捕获
一.实现的效果是在限制范围内拖拽div+吸附+事件捕获. 这里需要理解的是事件捕获,这个事件捕获也是为了兼容div在拖拽过程中,文本不被选中这个问题. 如此良辰美景,拖拽也可以很洒脱哈.先看看图, 二 ...
- JS之scrollTop、offsetHeight和offsetTop等属性用法详解和拖拽div
标题中的几个相关相关属性在网页中有这大量的应用,尤其是在运动框架中,但是由于有些属性相互之间的概念比较混杂或者浏览器兼容性问题,导致掌握起来比较有难度,下面就介绍一下相关属性的用法.先来看一张比较经典 ...
- 可拖拽div
在开发的时候需要一个可拖拽的prompt弹框.自己写了一个,大概思路为: 1.获取鼠标左键按下移动的起点坐标(x,y). 2.获取div的left和top属性. 3.得到鼠标坐标到左上角的距离(x-t ...
- JS拖拽div(移动)
<!doctype html><html><head> <meta charset="utf-8"> <title>JS ...
- 简洁的drag效果,自由拖拽div的实现及注意点
偶然间看到了以前做的一个简洁的div拖拽效果,修改了一下加点注释,经测试完美通过firefox/chrome/ie6-11,现拿来分享一下. 先说一下实现原理及要点,最主要的有三步.第一步是mouse ...
- javascript动画系列第一篇——模拟拖拽
× 目录 [1]原理介绍 [2]代码实现 [3]代码优化[4]拖拽冲突[5]IE兼容 前面的话 从本文开始,介绍javascript动画系列.javascript本身是具有原生拖放功能的,但是由于兼容 ...
- javascript动画系列第四篇——拖拽改变元素大小
× 目录 [1]原理简介 [2]范围圈定 [3]大小改变[4]代码优化 前面的话 拖拽可以让元素移动,也可以改变元素大小.本文将详细介绍拖拽改变元素大小的效果实现 原理简介 拖拽让元素移动,是改变定位 ...
- js基础 -----鼠标事件(按下 拖拽)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript面向对象系列第五篇——拖拽的实现
前面的话 在之前的博客中,拖拽的实现使用了面向过程的写法.本文将以面向对象的写法来实现拖拽 写法 <style> .test{height: 50px;width: 50px;backgr ...
- iOS边练边学--触摸事件以及能够拖拽的UIView的练习
一.用户在使用APP的过程中,会产生各种各样的事件.iOS中的事件可以分为3大类型: 二.响应者对象 在iOS中只有继承了了UIResponder的对象才能接受并处理事件,这样的对象称之为“响应者对象 ...
随机推荐
- Android笔记(二十八) Android中图片之简单图片使用
用户界面很大程度上决定了APP是否被用户接收,为了提供友好的界面,就需要在应用中使用图片了,Android提供了丰富的图片处理功能. 简单使用图片 使用Drawable对象 为Android应用增加了 ...
- git命令——git add
如何理解git add git add命令本身并不复杂,字面意义上理解是“将一个文件添加到项目中“.但是这种理解有缺陷,有时候可能会出现某个文件同时存在暂存区域 和 非暂存区域(staged and ...
- 别人家的java语言编写的自动化测试系统
https://gitee.com/testdevops/easyrest 但是我还不会用 ~~~~(>_<)~~~~ 目前的状况是:大概知道流程了,可是第一个用例就跑步起来 自己想写一些 ...
- ZZNU - OJ - 2080 : A+B or A-B【暴力枚举】
2080 : A+B or A-B(点击左侧标题进入zznu原题页面) 时间限制:1 Sec 内存限制:0 MiB提交:8 答案正确:3 提交 状态 讨论区 题目描述 Give you three s ...
- GET和POST的区别【转载】
GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二. 最直观的区别就是GET把参数包含在URL中,POST通过request body传递参数. 你可能自己 ...
- addEventListener和attachEvent的区别(转载)
attachEvent 与addEventListener到底有什么区别呢?总结如下: 一.适应的浏览器版本不同 attachEvent——兼容:IE7.IE8:不兼容firefox.chrome.I ...
- Redis vs kafka
kafka的订阅可以重复消费,但redis的不行,只能收到订阅之后发布的数据 redis无法实现消息堆积和回溯 1 Redis是个数据库,可以改.查,而KFAKA 不能改查2 redis是内存数据库, ...
- mysql类型为varchar double类型字符串求和多出多个小数
-- 错误 SELECT SUM(price) FROM m_user -- 正确 SELECT TRUNCATE ( ) FROM m_user u; -- 正确 SELECT ) ) FROM m ...
- Selenium常用API的使用java语言之11-设置元素等待
WebDriver提供了两种类型的等待:显式等待和隐式等待. 1.显示等待 WebDriver提供了显式等待方法,专门针对某个元素进行等待判断. import org.openqa.selenium. ...
- Http 请求头 响应体 详解
Referrer Policy 是什么? 我们知道,在页面引入图片.JS 等资源,或者从一个页面跳到另一个页面,都会产生新的 HTTP 请求, 浏览器一般都会给这些请求头加上表示来源的 Referre ...