DOM鼠标移动事件设置没问题,就是不能拖动

在前端页面中使用原生DOM进行页面的动态操作时比较复杂。在中首先通过以下相关方法找到你要进行操作的对象
getElementById(): 获取特定ID元素的节点对象(返回一个对象)
​ getElementsByTagName(): 获取指定标签名的节点列表(返回一个数组)
​ getElementsByName(): 获取相同name属性值的节点列表(返回一个数组)
​ getElementsByClassName(): 获取相同class值的节点列表(返回一个数组)
在对对象进行鼠标事件的操作时:
如果设置鼠标按下并进行拖拽,然后完成相关操作。例如屏幕解锁功能。
但是在平时操作练习,可能是由图片代表的滑块。
图例
此时如果直接在div里面放入图片,设置鼠标按下事件发生后,鼠标发生滑动时,图像并不能被拖动,需要抬起鼠标才能继续之后的操作,但是正常的鼠标抬起事件发生时滑块恢复原位的操作也会失败。因此要解决该问题,可以使用两种方法。失败图例

方法一

规范写法:在div的代表滑块的img标签中写入 draggable = ‘false’ //段落可拖动

方法二

比较复杂:改变div中img的写法。将滑块或者其他想要拖动的图片不要设置成img标签,而是在css中设置为该div标签的背景图片进行处理。此时也可以完成相关操作。后续鼠标抬起事件才能处理相关事件。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值