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

        在javascript实现模拟鼠标拖动元素(上)一文中,我凑巧让dispatch函数在html文件中生效了,本想将该函数用在chrome插件中,但因为个人js基本知识务必匮乏导致未使用成功。经过多天的查阅资料与学习,终于成功在chrome插件中使用dispatch函数,在此记录下来。

        chrome插件中使用dispatchEvent验证方案

        这里采用chrome插件控制本地html文件(new.html)中的元素来验证这个问题,html文件中包含一个绿色的正方形,且包含mouseup, mousedown, mousemove等处理函数。

       
chrome插件界面中填写好指定坐标后,按下GO。chrome插件会开启new.html文件,向该html文件中注入js代码,该js代码会先触发
mousedown事件,此事件会让html文件中的mousedown函数执行,然后会触发mousemove事件,该事件会将元素的目标位置传递至
html文件的mousemove函数中,最终实现将正方形移动至指定坐标。

javascript实现模拟鼠标拖动元素

       验证此功能的源代码可以在这里下载。现在默认状态下,new.html放在D盘根目录下,插件要操作本地电脑中的文件,需要在manifeston.json中给相应的权限。

       在《javascript实现模拟鼠标拖动元素(上)》diapatch调用失败的原因

       在tb登录界面中,有多个元素。在chrome浏览器中,按下F12,在Console界面中手动分别获取这些元素并触发这些元素的mouseevent事件,会发现一部分元素会报错,而另一部分则不会报错。而我之前在插件中操作的正好是会报错的元素,于是我以为是因为chrome插件injectjs无法使用dispatch函数,实际上并不是不能使用,而是浏览器判断该元素为未定义的元素,因此报错。

         那么dispatch是否能移动tb拖动元素呢?不能。
         在学习过程中,我发现mouseevent有一个只读属性,IsTrusted,该属性可以区分当前的鼠标事件是由dispatch触发或是非dispatch触发。我在chrome的console控制台中手动输入相关代码尝试移动拖动元素,console未报错但也浏览器未执行移动。在我们常用的百度搜索中,如果我们双击搜索内容,该内容会被选中,我在console中用dispatch对输入框触发鼠标双击动作,内容并未被选中。

         作为一个js入门者,需要学习更多的知识和更多的实践来弄懂这些东西。

发表评论

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

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

Fork me on GitHub