js 区分鼠标是点击事件还是拖拽事件，以及canvas拖拽

最新推荐文章于 2024-06-25 14:04:53 发布

Sukyo_h

最新推荐文章于 2024-06-25 14:04:53 发布

阅读量2.5k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/hongmy94/article/details/89856005

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在使用jsMind思维导图插件的时候需要对整个canvas进行拖拽，通过对源码的解读，摸索出这个方式，写下大概的思路，完整的jsMinddemo见gitHUb：https://github.com/Hongmy0/jsMind-.git

<!DOCTYPE html>
<html>

	 <head>
		<meta charset="UTF-8">
		<title>jsMind</title>
		
	 </head>

	 <body>
	
		<canvas id="can" onclick=“click()”></canvas >
	 </body>

<script>
var draging = false;// 用来区分的标记位
var clickFlag = false; 点击事件的flag
var timmerHandle = null;
function setDragTrue()
  {
    draging = true;
  }
$('body').on({
	'mousedown': function(e) {
        //每次点击都会触发
	draging = false;
	var el = e.target ||  event.srcElement;				
	oldPositon.x = e.clientX - el.offsetLeft;
	oldPositon.y = e.clientY - el.offsetTop;
	// 区分是点击还是拖拽事件 延时200毫秒
	timmerHandle = setTimeout(setDragTrue,200);
	},
	'mouseup': function(e) {
		if(!draging){
			// 清除定时器，避免200毫秒后一直在调用
			clearTimeout(timmerHandle); 
		}else{
			draging = false;
		    }
		},
        'mousemove': function(){
	   if(!draging||!clickFlag) {
		return
	   }
	  var drag = $('#can');
	  var el = e.target || event.srcElement;
	  var px = e.clientX - oldPositon.x;
          var py = e.clientY - oldPositon.x;
	  drag.css({
	      position: 'absolute',
	      left: px,
	      top: py
           });
         }
    });
   function click(e) {
	clickFlag = true;
			
   }

</script>
</html>

Sukyo_h

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 区分鼠标是点击事件还是拖拽事件，以及canvas拖拽

在使用jsMind思维导图插件的时候需要对整个canvas进行拖拽，通过对源码的解读，摸索出这个方式，写下大概的思路，完整的jsMinddemo见gitHUb：https://github.com/Hongmy0/jsMind-.git<!DOCTYPE html><html> <head> <meta charset="UTF-8"&g...
复制链接

扫一扫