出现的问题如下图所示（截屏看不出来看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的问题的更多相关文章

  1. 理解事件捕获。在限制范围内拖拽div+吸附+事件捕获

    一.实现的效果是在限制范围内拖拽div+吸附+事件捕获. 这里需要理解的是事件捕获,这个事件捕获也是为了兼容div在拖拽过程中,文本不被选中这个问题. 如此良辰美景,拖拽也可以很洒脱哈.先看看图, 二 ...

  2. JS之scrollTop、offsetHeight和offsetTop等属性用法详解和拖拽div

    标题中的几个相关相关属性在网页中有这大量的应用,尤其是在运动框架中,但是由于有些属性相互之间的概念比较混杂或者浏览器兼容性问题,导致掌握起来比较有难度,下面就介绍一下相关属性的用法.先来看一张比较经典 ...

  3. 可拖拽div

    在开发的时候需要一个可拖拽的prompt弹框.自己写了一个,大概思路为: 1.获取鼠标左键按下移动的起点坐标(x,y). 2.获取div的left和top属性. 3.得到鼠标坐标到左上角的距离(x-t ...

  4. JS拖拽div（移动）

    <!doctype html><html><head> <meta charset="utf-8"> <title>JS ...

  5. 简洁的drag效果，自由拖拽div的实现及注意点

    偶然间看到了以前做的一个简洁的div拖拽效果,修改了一下加点注释,经测试完美通过firefox/chrome/ie6-11,现拿来分享一下. 先说一下实现原理及要点,最主要的有三步.第一步是mouse ...

  6. javascript动画系列第一篇——模拟拖拽

    × 目录 [1]原理介绍 [2]代码实现 [3]代码优化[4]拖拽冲突[5]IE兼容 前面的话 从本文开始,介绍javascript动画系列.javascript本身是具有原生拖放功能的,但是由于兼容 ...

  7. javascript动画系列第四篇——拖拽改变元素大小

    × 目录 [1]原理简介 [2]范围圈定 [3]大小改变[4]代码优化 前面的话 拖拽可以让元素移动,也可以改变元素大小.本文将详细介绍拖拽改变元素大小的效果实现 原理简介 拖拽让元素移动,是改变定位 ...

  8. js基础 -----鼠标事件(按下 拖拽)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. javascript面向对象系列第五篇——拖拽的实现

    前面的话 在之前的博客中,拖拽的实现使用了面向过程的写法.本文将以面向对象的写法来实现拖拽 写法 <style> .test{height: 50px;width: 50px;backgr ...

  10. iOS边练边学--触摸事件以及能够拖拽的UIView的练习

    一.用户在使用APP的过程中,会产生各种各样的事件.iOS中的事件可以分为3大类型: 二.响应者对象 在iOS中只有继承了了UIResponder的对象才能接受并处理事件,这样的对象称之为“响应者对象 ...

随机推荐

  1. 【DRF框架】序列化组件

    DRF框架的序列化组件 在前后端分离的应用模式中,后端仅返回前端所需的数据,返回的数据类似是JSON,因此需要使用序列化组件进行序列化再将数据返回 使用JsonResponse做序列化 #  使用Js ...

  2. ansible自动化部署之场景应用

    ansible自动化配置管理 官方网站: https://docs.ansible.com 一.安装 配置 启动 (ansible由红帽收购) (1)什么是ansible ansible是IT自动化配 ...

  3. Vue + SpringBoot 前后端分离打包部署遇到的坑

    1. 在vue项目的目录下,用npm run build 生成dist目录,将目录下的static和index.html复制到SpringBoot项目下的resource目录下 这个时候发现启动Spr ...

  4. 无法访问此网站 ERR_CONTENT_DECODING_FAILED

    这个错误挺少见的. 百度了下: 1,说是文件编码格式不正确: 2,说是Nginx的压缩和tomcat的压缩冲突了,关闭gzip压缩: 3,……………… 不管是哪一种情况,都是编码问题,所以逐一排查,根 ...

  5. DOORS 和Reqtify — 需求管理和需求追溯工具

    IBM Rational DOORS 可实现对整个产品的全生命周期需求管理,覆盖从需求.到设计以及测试阶段.是一款具有广泛使用的企业级专业需求管理工具.DOORS 可以将项目开发过程中产生的各级需求和 ...

  6. 关于this和$(this)

    $(this)是jquery对象 指当前dom 例如 <div class='a'>4343</div> $('.a').on('click',function(){ $(th ...

  7. css定位篇

    1.浮动的特性: 1.浮动的元素脱标 2.浮动的元素互相贴靠 3.浮动的元素有“字围”效果 4.收缩的效果 前提是标准文档流,margin的垂直方向会出现塌陷问题. 如果盒子居中:margin:0 a ...

  8. 2020年日期表-python实现

    import pandas as pdimport calendarimport datetime # 生成日期范围date = pd.date_range("2020-01-01" ...

  9. 前端学习笔记--html入门

    1.什么是html 2.标签和元素: 标签可嵌套,要注意缩进 html文档中的元素分为:内容文本.标签 3.标签和属性: 4.html的文件结构: 5.标签 a标签: 还不知道跳转到哪里,可以使用虚拟 ...

  10. php MySQL 选择数据库

    在你连接到 MySQL 数据库后,可能有多个可以操作的数据库,所以你需要选择你要操作的数据库. 从命令提示窗口中选择MySQL数据库 在 mysql> 提示窗口中可以很简单的选择特定的数据库.你 ...