本文介绍了JavaScript拖拽功能存在的兼容性问题，特别是在文字和元素共存时，选中文本后可能无法正确拖拽元素。针对这个问题，提出了两种解决方案：在标准浏览器中使用`return false`阻止默认行为；在非标准浏览器中利用`setCapture`和`releaseCapture`进行事件捕获。文章还提到，这些方法在不同浏览器中的兼容性表现不一，例如IE有效，Firefox和Chrome则存在局限。最后，提到了拖拽图片的类似问题和封装拖拽功能的便利性。
JS拖拽的兼容性问题解决
JS拖拽的兼容性问题解决。
在上文我们介绍过JS拖拽的原理及应用。JS中的拖拽还是有兼容性问题。也就是说当页面中有文字也有元素时（比如图片），当我们选中文字时，再点击元素拖拽的话，这个时候是不能拖拽元素的，而相反的会拖拽文字。这是因为选中文字再拖拽，会触发浏览器拖拽文字的默认行为。 解决兼容性问题。不同的浏览器不同的解决方法
1、在标准浏览器下，直接使用retrun false语句阻止默认行为。在onmou程序运行结尾的时候阻止。
2、在非标准下，使用setCapture和releaseCapture阻止。使用if语句在onmousedown时阻止。
setCapture 设置全局捕获（和之前的捕获不一样），它的意思是：当我们给一个元素设置全局捕获以后，那么这个元素就会监听后续发生的所有事件，当有事件发生的时，就会被当前设置了全局捕获的元素所触发。就算这个事件并不是发生在这个元素身上的，它也可以也可以截获这个事件，然后执行本元素的函数内容。 比如说当文字是被选中的状态，就算我们将鼠标放在元素上，这个时候如果要拖拽就应该是拖拽文字了，但是当我们使用setCapture的时候，就会将选中文字的这个行为截获过来，选中的是元素，拖拽的也是元素。 releaseCapture 这表示全局释放，当释放元素的时候，使用if判断释放元素即可。
还是之前的demo，给原demo添加文字，选中后再进行操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽有文字被选中时</title>
<style>
#div{
width:
最低0.47元/天 解锁文章
扫一扫
660
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
