IT编程 > 网页制作 > HTML

浏览器兼容设置 + 拖拽封装

95人参与2020-08-08

浏览器兼容设置

都以点击事件 onclick 为例:

事件对象获取

document.onclick = function(ev) { let e = ev || window.event; } 

获取键码

let w = e.which || e.keyCode; 

目标对象 / 触发对象

button.onclick = function() { let target = e.target || window.event.srcElement; } 

阻止超链接默认行为的函数

e 为获取到的事件

function preDef(e) { if(e.preventDefault) { e.preventDefault(); } else { window.event.returnValue = false; } } 

事件监听器

function addEvent(node,evenType,funName) { if(node.addEventListener) { node.addEventListener(evenType, funName,false); } else { node.attachEvent('on' + evenType, funName); } } 
function removeEvent(node,evenType,funName) { if(node.removeEventListener) { node.removeEventListener(evenType, funName,false); } else { node.detachEvent('on' + evenType, funName); } } 

获取当前窗口的宽高

let Width = document.documentElement.clientWidth || document.body.clientWidth; let Height = document.documentElement.clientHeight || document.body.clientHeight; 

拖拽封装

普通拖拽封装

function drag(node) { node.onmousedown = function(ev) { let e = ev || window.event; // 获取鼠标到 node 左上角的相对位置 let offSetX = e.clientX - node.offsetLeft; let offSetY = e.clientY - node.offsetTop; // 鼠标移动时,计算 node 左上角应该在的位置 document.onmousemove = function(ev) { let e = ev || window.event; node.style.left = e.clientX - offSetX + 'px'; node.style.top = e.clientY - offSetY + 'px'; } } document.onmouseup = function() { document.onmousemove = null; } } 

限制出界的拖拽封装

function limitDrag(node) { node.onmousedown = function (ev) { let e = ev || window.event; // 获取鼠标到 node 左上角的相对位置 let offSetX = e.clientX - node.offsetLeft; let offSetY = e.clientY - node.offsetTop; document.onmousemove = function (ev) { let e = ev || window.event; // 鼠标移动时,计算 node 左上角应该在的位置 let x = e.clientX - offSetX; let y = e.clientY - offSetY; // 限制出界 // 获取当前窗口的宽高 let Width = document.documentElement.clientWidth || document.body.clientWidth; let Height = document.documentElement.clientHeight || document.body.clientHeight; if (x <= 0) { x = 0; } if (x >= Width - node.offsetWidth) { x = Width - node.offsetWidth } if (y <= 0) { y = 0; } if (y >= Height - node.offsetHeight) { y = Height - node.offsetHeight } node.style.left = x + 'px'; node.style.top = y + 'px'; } } document.onmouseup = function () { document.onmousemove = null; } } 

针对拖拽封装的小栗子:
https://blog.csdn.net/Web_blingbling/article/details/107868162

您对本文有任何疑问!!点此进行留言回复

推荐阅读

猜你喜欢

浏览器兼容设置 + 拖拽封装

08-08

关于HTML中父子级外边距合并的问题

08-08

jquery如何封装,简单实例

08-08

CSS选择器的用法(详解)

08-08

京训钉自动播放,京训钉自动续播,京训钉刷课时,京训钉自动关弹窗,京训钉自动下一课

08-08

前端利用伪元素+动画效果制作一个跳动的心

08-08

拓展阅读

大家都在看

音视频编解码:NVIDIA Jetson Linux Multimedia API(总结)

12-04

前端页面点击图片放大功能(viewerjs插件的简单而强大)

08-20

WVP+ZLMediaKit+MediaServerUI实现摄像头GB28181推流播放录制

08-12

京训钉自动播放,京训钉自动续播,京训钉刷课时,京训钉自动关弹窗,京训钉自动下一课

08-12

解决uniapp小程序打包体积超过2M,提示包体积超过2M,“main packagexxx”,不给上传和预览的解决办法,绝对有效!

08-14

R2S搭配即插即用的4G Cat4实现4G转有线以太网的应用演示

11-17

R2S搭配即插即用的4G Cat4实现4G转有线以太网的应用演示

11-17

i5 1135g7和i5 9300h 相差多少

11-17

热门评论