了解 HTML 5 事件拖动

2024-07-01

我不明白为什么在事件拖动中鼠标坐标clientX的返回值总是0或释放鼠标之前的负值。

我准备了一个例子,当用户dragstart,鼠标位置正确,结束同样dragend...但是如果你查看控制台drag你会看到之前dragend负值。

是正常行为吗?为什么?我需要避免这个 0 值。有什么解决办法吗?

http://jsfiddle.net/gg8gLpg0/ http://jsfiddle.net/gg8gLpg0/

  <!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>

在我对 Firefox 的测试中,拖动元素仅触发 0。 并且,拖动事件阻止了“mousemove”事件到达文档级别以这种方式捕获它。

jsfiddle.net/qgedt70a/

Mozilla 的官方文档说 clientX 是拖动对象的本地坐标,而 screenX 是全局坐标,但是在上面 jsfiddle 的测试变体中,两者都从拖动事件返回 0。

可能是一个错误。或者,我很好奇他们是否在某些奇怪的安全场景中禁用了它?

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

了解 HTML 5 事件拖动 的相关文章

  • 如何防止图像溢出圆角框?

    如果我使用此代码 图像不会被 div 的圆角剪切 导致图像的方角覆盖 div 的圆角 div img src big image jpg div 有谁知道如何获得圆角 div 来防止子图像溢出 我最新的 Chrome Firefox 和 S
  • 未捕获的 NotFoundError:无法在“Node”上执行“insertBefore”:

    我有一个div另外三个里面的哪里div附加如下 状态值是通过循环 api 的结果来设置的componentWillReceiveProps 但我遇到了一个错误的问题 Uncaught NotFoundError Failed to exec
  • 禁用 WebSocket 证书验证

    我需要禁用 WebSocket 的证书验证 因为我使用的是自签名证书 我在这个问题中发现Websocket SSL 连接 https stackoverflow com questions 30902547 websocket ssl co
  • 媒体查询和 Bootstrap 有什么区别? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 奇怪的是 CSS3 媒体查询和 Bootstrap 之间的区别是什么 我访问过很多网站 但每个人都说 两者都是为了网站的响应能力 如果
  • 全选/取消全选页面中的复选框

    我看过this http railsforum com viewtopic php id 2151这似乎对我的代码没有影响 我试过了this https stackoverflow com questions 888173 select a
  • Aurelia.io:如何导航到路线

    我有一个包含配置路由的 router js 文件 路线 js export class App configureRouter config router config title Aurelia config map route welc
  • 显示为问号的度unicode

    以下代码显示为问号而不是度数符号 var airF Math round Number MDTMOBILE RWISWeather i AirTemp u00B0 F tempTable find td eq 4 text airF var
  • Javascript 日期时间字符串转 UTC 日期时间和 UTC 转本地日期时间

    我需要将字符串转换为 UTC 日期 然后将 UTC 日期转换为本地日期 这是我的代码 var dateStr 9 8 2015 12 44 00 PM console log strtoUTCtoLocal dateStr function
  • 将框架外页面重定向到index.htm中的特定框架

    我在 index html 文件上使用框架 在框架的每个页面上 我都有一个代码来检查页面是否在框架中 如果没有 则重定向到index html 现在 我不仅想检查页面是否在框架中并重定向到index html 而且还想在index html
  • javascript 权限被拒绝访问属性

    我在从不同的 iframe 访问属性时遇到问题 我不断收到此权限被拒绝访问属性错误 我见过有人多次询问他们是否使用 file 但没有人 除了我 所以这个问题永远不会得到解决 我不会在网络上这样做 我所有帧的 src 都位于硬盘驱动器上的同一
  • 反序列化 jQuery 序列化表单

    我正在尝试将表单输入传递到 WebMethod 中并执行某些操作 我用了jQuery 序列化 http api jquery com serialize
  • Javascript“悬停时”循环

    任何人都可以帮助我解决这个问题 我有一个按钮 当悬停时会触发一个操作 但我希望只要按钮悬停就重复它 我很感激任何解决方案 无论是在 jquery 还是纯 javascript 中 这是我的代码此时的样子 在 jquery 中 var scr
  • Jquery ui 与 Jeditable

    我正在尝试这段代码
  • 从 JavaScript 中的内部函数返回?

    我有一个 jQuery 支持的 JavaScript 函数 它迭代字段列表并检查它们是否为空 如果是 则阻止表单的提交 required fields forEach function field if field val field ad
  • TypeError:使用 Svelte 和 jest 时 Select 不是构造函数

    当为 Svelte 组件编写 Jest 测试时 我得到了TypeError Select is not a constructor当组件使用 es6 导入语法导入库时出错 测试选择 js
  • 画布中圆弧的不同 fillStyle 颜色

    我想这个问题的解决方案非常简单 如果这是非常明显的 请提前道歉 但我似乎无法弄清楚如何为两个不同的弧设置两个不同的 fillStyles 我只是想能够绘制不同的彩色圆圈 下面我介绍了我通常如何在画布中使用其他形状 绘图方法来完成此操作 但由
  • HTML / Javascript - 通过单击父行来展开和折叠表行(子行)

    我几天来一直在尝试解决一个问题 终于明白 如 果没有帮助 我将不会成功 我想做一件我们每天在互联网上看到的常见事情 能够单击表格行以显示更多详细信息 但这里的更多细节并不意味着文本块 而是指与父行具有相同形状的子行 以下是 HTML 表格的
  • 通过 http 在两个 Node.js 服务器之间传输文件

    我有两个通过 http 相互通信的 node js express 服务器 server A它还与浏览器通信并可以处理文件上传请求 当文件上传到server A我想将其原样转移到server B以便进一步加工 最好的方法是什么 最好与请求
  • HTML5离线缓存谷歌字体API

    我正在尝试创建一个离线 HTML5 测试应用程序 并同时使用新的 google fonts api 有谁知道如何缓存远程字体 简单地将 api 调用放入缓存清单中是行不通的 我认为这是因为 api 实际上加载了其他文件 ttf eot 等
  • 通过 javascript 选择/取消选择所有复选框单击单个复选框

    I have a form in which I have two table with some rows 我希望当我点击时选择 取消选择全部复选框 而不是针对该特定表应选中该复选框下方的复选框 我有一个可以工作的 JavaScript

随机推荐