韩国饰品批发网站:模拟元素点击的几种方式
来源:百度文库 编辑:中财网 时间:2024/04/29 01:13:44
最简单的莫过于使用click方法
1
<
input
id
=
"btn"
type
=
"button"
value
=
"BUTTON"
onclick
=
"alert(1)"
/>
2
<
script
>
3
var btn = document.getElementById('btn');
4
btn.click();
5
script
>
所有浏览器都弹出了1。
把input换成div呢
1
<
div
id
=
"d1"
style
=
"background:gold;width:50px;height:50px;"
onclick
=
"alert(2)"
>
div
>
2
<
script
>
3
var d1 = document.getElementById('d1');
4
d1.click();
5
script
>
这次Safari/Chrome中没有弹出2。
即不是所有浏览器中的所有元素都支持click方法。事实上只有input/button元素在所有浏览器才具有click方法。
以上的事件都是直接添加在html属性中的(内联事件)。click方法能触发使用el.onXXX/addEventListener/attachEvent添加的事件吗?
01
<
input
id
=
"btn1"
type
=
"button"
value
=
"BUTTON 1"
/>
02
<
input
id
=
"btn2"
type
=
"button"
value
=
"BUTTON 2"
/>
03
<
script
>
04
var addListener = window.addEventListener ?
05
function(el, type, fn) { el.addEventListener(type, fn, false); } :
06
function(el, type, fn) { el.attachEvent('on' + type, fn); };
07
var btn1 = document.getElementById('btn1');
08
var btn2 = document.getElementById('btn2');
09
btn1.onclick = function(){
10
alert(3);
11
};
12
addListener(btn2, 'click', function() {alert(4)});
13
btn1.click();
14
btn2.click();
15
16
script
>
所有浏览器都依次弹出了3,4。
说明支持click方法的元素,无论使用内联方式还是el.onXX又或addEventListener/attachEvent添加事件都能触发。
click方法已经写入了HTML5草案,如果Safari/Chrome完成对剩下的元素的实现(非input/button)。那么模拟点击将十分简单,直接调用click方法。Firefox也是刚刚在版本5中实现对非input/button元素的click方法实现,这点Safari/Chrome有些落后了。
既然Safari/Chrome中click不可用, 我们就用dispatchEvent来实现了。
01
<
input
id
=
"btn1"
type
=
"button"
value
=
"BUTTON 1"
onclick
=
"alert(1)"
/>
02
<
input
id
=
"btn2"
type
=
"button"
value
=
"BUTTON 2"
onclick
=
"alert(2)"
/>
03
<
div
id
=
"d1"
style
=
"background:gold;width:50px;height:50px;"
onclick
=
"alert(3)"
>
div
>
04
<
script
>
05
function dispatch(el, type){
06
try{
07
var evt = document.createEvent('Event');
08
evt.initEvent(type,true,true);
09
el.dispatchEvent(evt);
10
}catch(e){alert(e)};
11
}
12
var btn1 = document.getElementById('btn1');
13
var btn2 = document.getElementById('btn2');
14
var d1 = document.getElementById('d1');
15
dispatch(btn1, 'click');
16
dispatch(btn2, 'click');
17
dispatch(d1, 'click');
18
19
script
>
依次弹出了1,2,3。换成其它事件添加方式亦可触发。
IE中还有个fireEvent去主动触发事件,当然如果是点击事件使用click更好。非点击事件则只能通过fireEvent去触发了。
最后给出我的triggerClick方法,实现方式判断浏览器,判断nodeName。依据是Safari/Chrome不支持非input/button元素的click方法。
01
function
triggerClick( el ) {
02
var
nodeName = el.nodeName,
03
safari_chrome = /webkit/.test(navigator.userAgent.toLowerCase());
04
if
(safari_chrome && (nodeName !=
'INPUT'
|| nodeName !=
'BUTTON'
)) {
05
try
{
06
var
evt = document.createEvent(
'Event'
);
07
evt.initEvent(
'click'
,
true
,
true
);
08
el.dispatchEvent(evt);
09
}
catch
(e){alert(e)};
10
}
else
{
11
el.click();
12
}
13
}
上面的实现方式让你能明白浏览器的差异,但实现其实有点罗嗦。直接判断元素是否具有click方法即可,Safari/Chrome中非input/button元素没有click方法,返回undefined。
01
function
triggerClick( el ) {
02
if
(el.click) {
03
el.click();
04
}
else
{
05
try
{
06
var
evt = document.createEvent(
'Event'
);
07
evt.initEvent(
'click'
,
true
,
true
);
08
el.dispatchEvent(evt);
09
}
catch
(e){alert(e)};
10
}
11
}
特性判断也比浏览器判断有更好的前瞻性,比如Safari/Chrome在后续版本中实现了非input/button元素的click方法,那么特性判断的函数仍然可以向下兼容。