了解HTML 5事件拖动 [英] Understanding HTML 5 event drag
问题描述
我不明白为什么在事件拖动中鼠标坐标clientX的返回值始终为0或释放鼠标之前的负值。
我已经准备好了例如，当用户 dragstart 时，鼠标位置是正确的，对于结束 dragend ...，但如果你看拖动的控制台，您将在 dragend 之前看到一个负值。
是否正常行为？为什么？我需要避免这个0值。任何解决方案？
<！DOCTYPE html>
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< title>< / title>
< style>
#test {
position：absolute;
width：100px;
height：100px;
背景颜色：红色;
}
< / style>
< / head>
< body>
< div id =testdraggable =true> test< / div>
< script>
var elm = document.getElementById（'test'）;
elm.addEventListener（'drag'，function（event）{
//console.log (event.clientX）;
//console.log(event.clientY） ;
} .bind（this））;
elm.addEventListener（'dragstart'，function（event）{
console.log（'start'）;
console.log（event.clientX）;
console.log（event.clientY）;
} .bind（this））;
elm.addEventListener（'drag'，function（event）{
console.log（'drag'）; // PROBLEM HERE
console.log（event.clientX ）;
console.log（event.clientY）;
} .bind（this））;
elm.addEventListener（'dragend'，function（event）{
console.log（'end'）;
console.log（event.clientX）;
console.log（event.clientY）;
} .bind（this））;
< / script>
< / body>
< / html>
在Firefox中的测试中，拖动元素只会触发0.
AND，拖动事件阻止了mousemove事件达到文档级别以这种方式捕获。
jsfiddle.net/qgedt70a/
Mozilla的官方文档说clientX是拖放对象的本地地址，screenX是全局坐标，但是在上述jsfiddle的测试变体中都会从拖动事件返回0。
可能是一个错误。或者，如果他们禁用了某种奇怪的安全方案，我好奇？
I do not understand why the returning value for mouse coordinate clientX in event drag is always 0 or a negative value just before releasing the mouse.
I have prepare an example, when user dragstart, mouse position is correct, same for end dragend... but if you look at the console for drag you will see before dragend a negative value.
Is a normal behavior? Why? I need to avoid this 0 value. any solutions?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
#test {
position: absolute;
width: 100px;
height: 100px;
background-color:red;
}
</style>
</head>
<body>
<div id="test" draggable="true">test</div>
<script>
var elm = document.getElementById('test');
elm.addEventListener('drag', function (event) {
//console.log(event.clientX);
//console.log(event.clientY);
}.bind(this));
elm.addEventListener('dragstart', function (event) {
console.log('start');
console.log(event.clientX);
console.log(event.clientY);
}.bind(this));
elm.addEventListener('drag', function (event) {
console.log('during drag');// PROBLEM HERE
console.log(event.clientX);
console.log(event.clientY);
}.bind(this));
elm.addEventListener('dragend', function (event) {
console.log('end');
console.log(event.clientX);
console.log(event.clientY);
}.bind(this));
</script>
</body>
</html>
In my tests on Firefox the drag element ONLY fires a 0. AND, the drag event stopped the "mousemove" event from reaching the document level to capture it that way.
jsfiddle.net/qgedt70a/
Mozilla's official docs say the clientX is local for dragged objects and screenX is global coordinates, however both return 0 from the drag event in variations of my tests at the above jsfiddle.
Could be a bug. OR, I'm curious if they have disabled it for some strange security scenario?
这篇关于了解HTML 5事件拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
