Comments (3)
box.onmouseup = function () { document.onmousemove = null; box.onmouseup = null;}
呆呆大佬,这里的mouseup事件的监听对象改成document会不会比较好呢?
如果是box的话,当鼠标超出box的范围,就无法监听到该事件并触发监听函数了;
场景是当按下鼠标拖拽box至超出页面范围(进入浏览器顶部菜单栏等等)并释放鼠标,然后再回到box中,会发现虽然鼠标处在释放的状态,但仍然可以拖拽box;
原因是鼠标并不是在box内部抬起的,所以并没有触发box的mouseup事件的监听函数,所以document的mousemove事件并没有移除。
from niubility-coding-js.
部分逻辑做了优化处理,整体没啥变化。
window.onload = function() {
const $box = document.querySelector("#box");
$box.addEventListener("mousedown", function onMouseDown(ev) {
const { event = ev } = window;
const distanceX = event.clientX - $box.offsetLeft;
const distanceY = event.clientY - $box.offsetTop;
document.addEventListener("mousemove", onMouseMove);
function onMouseMove(eve) {
const docEvent = eve || window.event;
const left = inRange(
docEvent.clientX - distanceX,
0,
document.documentElement.clientWidth - $box.offsetWidth
);
const top = inRange(
docEvent.clientY - distanceY,
0,
document.documentElement.clientHeight - $box.offsetHeight
);
$box.style.left = `${left}px`;
$box.style.top = `${top}px`;
}
$box.addEventListener("mouseup", onMouseUp);
function onMouseUp() {
document.removeEventListener("mousemove", onMouseMove);
$box.removeEventListener("mouseup", onMouseUp);
}
});
};
function inRange(num, start, end) {
let ret = num;
ret = Math.max(ret, start);
ret = Math.min(ret, end);
return ret;
}
from niubility-coding-js.
box.onmouseup = function () { document.onmousemove = null; box.onmouseup = null;}
呆呆大佬,这里的mouseup事件的监听对象改成document会不会比较好呢?
如果是box的话,当鼠标超出box的范围,就无法监听到该事件并触发监听函数了;
场景是当按下鼠标拖拽box至超出页面范围(进入浏览器顶部菜单栏等等)并释放鼠标,然后再回到box中,会发现虽然鼠标处在释放的状态,但仍然可以拖拽box;
原因是鼠标并不是在box内部抬起的,所以并没有触发box的mouseup事件的监听函数,所以document的mousemove事件并没有移除。
是的,感谢指出,我去本地试了确实这样效果会好一些,我修改一下。再次感谢😄
from niubility-coding-js.
Related Issues (20)
- ⛽️第5期第3题:按位取反,为什么`~2 = -3`?
- ⛽️第5期第4题:知道`insertAdjacentHTML`方法吗?
- ⛽️第5期第5题:`insertAdjacentHTML`和`insertAdjacentElement`的区别 HOT 1
- ⛽️第5期第6题:实现九宫格布局
- ⛽️第5期第7题:说说will-change
- 💪第6期第1题:[,,,]的长度
- 💪第6期第2题:如何判断当前脚本运行在浏览器还是 node 环境中?
- 💪第6期第3题:reduce方法有初始值和没有初始值的区别? HOT 1
- 💪第6期第4题:form表单中的label标签的作用?
- 💪第6期第5题:HTML5中的自动完成功能autocomplete是做什么的?
- 💪第6期第6题:CSS中的visibility有个collapse属性值是干嘛用的?
- 💪第6期第7题:块状元素width:100%与width:auto的区别?
- 🎁第7期第1题:几种字符串转为数字的方法,有什么区别?
- 🎁第7期第2题:转换类数组的几种方式
- 🎁第7期第3题:如何判断一个对象是否为空对象?
- 🎁第7期第4题:如何让Chrome浏览器支持小于12px的字体大小?
- 🎁第7期第5题:font-style 属性中 italic 和 oblique 的区别?
- 🎁第7期第6题:空元素(单标签)元素有哪些?
- 🎁第7期第7题:b与strong的区别以及i和em的区别?
- 对于45题面试题的一些自己的想法
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from niubility-coding-js.