javascript实现模拟鼠标拖动元素(上)

      模拟鼠标拖动网页元素是一种比较常见的需求,本文介绍用javascript来实现该功能。本文主要参考了原生javascript实现拖动元素,在此对原作者致敬,原文是需要实际鼠标操作后来拖动元素到鼠标移动结束的位置,本文则侧重于自动触发鼠标的mousedown,mousemove来实现让网页元素自动移动到指定位置。

代码主要思路:

1. 通过dispatchEvent触发鼠标事件”mousedown”,”mousemove”,”mouseup”;

2. 通过addHandler捕捉鼠标事件“mousedown”,”mousemove”,”mouseup”;

3. 对指定网页元素触发”mousedown”;

4. 在”mousemove”事件中将指定元素移动至指定位置;

5. 当触发”mouseup”时间时,终止拖动。

代码如下:

学习模拟鼠标拖动的主要目的以及结论

       学习模拟鼠标拖动的初衷是为了尝试在chrome插件中操作TB登录时出现的“拖动滑块”的动作。最初我尝试过通过对比滑块滑动前后相关元素的CSS属性,尝试在插件中直接修改相关元素的CSS属性来验证,事实证明这样是行不通的。

验证通过前后相关元素的属性对比

       知乎上有一篇关于这个问题的讨论,有兴趣的同学可以看看:淘宝在找回密码时,需要向右滑动验证,原理是?

       以我目前浅显的认知来看,这个问题似乎只能通过模拟鼠标的动作来实现。可惜chrome插件的运行环境不支持dispatchEventaddHandler,因此该尝试以失败告终,在此记录下来,以备查阅。若有高手愿意指点一二,作者将不甚感激。


Comments

  1. By 奔放的胸毛。

    回复

    • By live

      回复

  2. By live

    回复

  3. By 奔放的胸毛。

    回复

    • By live

      回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Fork me on GitHub