码迷,mamicode.com
首页 > 其他好文 > 详细

模拟鼠标事件

时间:2016-07-11 07:54:46      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:

使用以下三行代码就可以使用模拟鼠标事件了

var oCreateEvt = $D.createEvent(‘MouseEvents‘);//模拟鼠标对象
oCreateEvt.initMouseEvent(‘click‘,true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);

$(id).dispatchEvent(oCreateEvt);

比较方便的应用可以利用模拟鼠标事件写一个键盘操作系统,具体实现

技术分享
数据结构:
var oKeycombination = [//非组合键不会阻止默认事件
            {page:‘‘,key:esc,id:‘‘,desc:esc键,取消光标},
            {page:‘‘,key:m,id:zc_person_index_market,desc:市场页面},
            {page:‘‘,key:n,id:zc_person_news,desc:新闻},
            {page:‘‘,key:c,id:zc_person_chat,desc:聊天},
            {page:‘‘,key:s,id:left_feedBack,desc:意见},
            {page:‘‘,key:f,id:table_furl,desc:收放},
            {page:‘‘,key:1,id:person_type1,desc:1},
            {page:‘‘,key:2,id:person_type2,desc:2},
            {page:‘‘,key:3,id:person_type3,desc:3},
            {page:‘‘,key:4,id:person_type4,desc:4},
            {key:ctrl+1,id:common_chat,page:chat,desc:chat页面切换标签},
            {key:ctrl+2,id:private_chat,page:chat,desc:chat页面切换标签},
            {key:ctrl+1,id:hotNews,page:news,desc:news页面切换标签},
            {key:ctrl+2,id:news_final,page:news,desc:news页面切换标签},
            {key:ctrl+3,id:news_base,page:news,desc:news页面切换标签},
            {key:shift+1,id:market_tab1,page:market,desc:market页面切换标签},
            {key:shift+2,id:market_tab2,page:market,desc:market页面切换标签},
            {key:shift+3,id:market_tab3,page:market,desc:market页面切换标签},
            {key:shift+4,id:market_tab4,page:market,desc:market页面切换标签},
            {key:ctrl+1,id:canvas_chart1,page:canvas,desc:canvas1图},
            {key:ctrl+2,id:canvas_chart2,page:canvas,desc:canvas4图},
            {key:ctrl+3,id:canvas_chart3,page:canvas,desc:canvas9图},
            {key:ctrl+4,id:canvas_chart4,page:canvas,desc:canvas16图},
            {key:ctrl+5,id:canvas_chart5,page:canvas,desc:canvas25图}
        ];

方法:
    function combinationKey(key,page,id){//键盘事件
        WT.key(key, function(e){
            e=WT.e.fix(e);
            if (page.length > 0) {
                  e.stop();
            }
              if (key === esc) {
                  clearList(e);
                clearTips(e);
                document.activeElement.blur();
              }else if(document.activeElement.tagName === BODY && window.location.hash.indexOf(page)>-1 && id){
                  $(id).dispatchEvent(oCreateEvt);
              }else if (document.activeElement.tagName === BODY && id){
                  $(id).dispatchEvent(oCreateEvt);
              }
        });
    }

for(var i=0; i<oKeycombination.length; i++){
            combinationKey(oKeycombination[i].key,oKeycombination[i].page,oKeycombination[i].id);
        }
View Code

注意:

1 需要模拟的元素的事件引用需要在你当前加载的页面才有效

2 需要模拟的元素不方便取到可以放在隐藏的元素中。

3 使用组合键时可能需要阻止默认事件,注意阻止默认事件的处理应该在keydown时处理,不然会没有效果。

4 当前focus元素如果是输入框,可以将鼠标焦点调至document.body

模拟鼠标事件

标签:

原文地址:http://www.cnblogs.com/lv-sally/p/5659095.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!