微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

使用JavaScript全局覆盖鼠标光标

在我的Web应用程序中,我尝试实现一些拖放功能.我有一个全局的 JavaScript组件,这是基本的东西.此对象还负责根据当前拖动操作(移动,复制,链接)更改鼠标光标.在我的网页上有各种HTML元素,它们定义了一个自己的光标样式,不管是内联还是通过CSS文件.

那么,我的中央拖放组件是否可以全局更改鼠标光标,与鼠标光标所在元素的风格无关?

我试过了:

document.body.style.cursor = "move"

document.body.style.cursor = "move !important"

但它不行.每次拖动定义游标样式的元素时,游标将变为该样式.

当然,我可以改变我当前拖动的元素的样式,但是当我使用元素时,我必须重置它.这似乎有点复杂.我正在寻找一个全球解决方案.

解决方法

请:不要屠杀你的CSS!

要实现拖放操作,您必须使用非常重要的API:element.setCapture().这有以下后果:

>所有的鼠标事件被重定向到捕获的目标元素,无论它们在哪里发生(甚至在浏览器窗口之外)
>光标将是捕获目标元素的光标,无论鼠标指针在何处.

您必须调用element.releaseCapture()或document.releaseCapture()才能在操作结束时切换回正常模式.

小心拖放的天真的实现:你可以有很多痛苦的问题,例如(其中包括):如果鼠标在浏览器的窗口之外或在具有停止传播的处理程序的元素上重新启动,会发生什么.使用setCapture()解决所有这些问题,以及光标样式.

您可以阅读this excellent tutorial,详细解释这一点,如果你想实现拖放自己.

也许你也可以在你的上下文中使用jQuery UI draggable.

原文地址:https://www.jb51.cc/js/151323.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐