在某些功能上可能我们会使用到模拟用户点击,当然在jQuery中的模拟事件已经很强大了,但是我们再使用其他库或者使用原生JavaScript的时候,不可能使用jQuery的美元号去实现这个功能了,因此只能通过原生JavaScript去实现,下面我们就来看看代码该如何写。
原生js中可以通过dispatch方法来模拟用户行为,如点击(click),触屏(touchStart)操作等,我们都可以进行模拟。
自动触发内置事件
自动触发事件有两种方法,目前支持IE内核以及Firefox内核浏览器,但是并不支持chrome
1 | //自动触发内置事件 |
2 | function commonTrigger(el, type) { |
3 | var evt = document.createEvent("MouseEvents"); |
4 | evt.initEvent(type, true, true); |
5 | el.dispatchEvent(evt); |
6 | } |
7 | //自动触发内置事件 |
8 | function trigger(el, type) { |
9 | var event = new MouseEvent(type, { |
10 | 'view': window, |
11 | 'bubbles': true, |
12 | 'cancelable': true |
13 | }); |
14 | el.dispatchEvent(event); |
15 | } |
触发自定义事件
以上的内置事件,在chrome中无法执行,我们只能通过触发自定义事件的方法进行触发,相关代码如下:
1 | function customTrigger(el, type) { |
2 | var event = new Event(type); |
3 | el.addEventListener(type, function (e) { |
4 | alert('ok'); |
5 | }, false); |
6 | el.dispatchEvent(event); |
7 | } |
使用方法
一看上面的函数,就知道使用方法很简单了,使用如下
1 | var el = document.getElementById('element'); |
2 | var type = 'click'; |
3 | commonTrigger(el, type); |
4 | trigger(el, type); |
5 | customTrigger(el, type); |
虽然这个代码能够在浏览器中,特别是chrome中实现点击事件,但是总是无法真实的模拟用户点击,大家慎用,jQuery中的方法,我没有尝试过,不知道是否能够真实模拟用户点击。如果你要模拟真实用户点击事件,得通过其他类库实现!