模拟元素点击的几种方式

最简单的莫过于使用click方法

 

<input id="btn" type="button" value="BUTTON" onclick="alert(1)"/>
<script>
	var btn = document.getElementById('btn');
	btn.click();
</script>

 

所有浏览器都弹出了1。

把input换成div呢

 

<div id="d1" style="background:gold;width:50px;height:50px;" onclick="alert(2)"></div>
<script>
	var d1 = document.getElementById('d1');
	d1.click();
</script>

 

 

这次Safari/Chrome中没有弹出2。

即不是所有浏览器中的所有元素都支持click方法。事实上只有input/button元素在所有浏览器才具有click方法。

 

以上的事件都是直接添加在html属性中的（内联事件）。click方法能触发使用el.onXXX/addEventListener/attachEvent添加的事件吗？

 

<input id="btn1" type="button" value="BUTTON 1"/>
<input id="btn2" type="button" value="BUTTON 2"/>
<script>
	var addListener = window.addEventListener ?
		function(el, type, fn) { el.addEventListener(type, fn, false); } :
		function(el, type, fn) { el.attachEvent('on' + type, fn); };
	var btn1 = document.getElementById('btn1');
	var btn2 = document.getElementById('btn2');
	btn1.onclick = function(){
		alert(3);
	};
	addListener(btn2, 'click', function() {alert(4)});
	btn1.click();
	btn2.click();

</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来实现了。

 

<input id="btn1" type="button" value="BUTTON 1" onclick="alert(1)"/>
<input id="btn2" type="button" value="BUTTON 2" onclick="alert(2)"/>
<div id="d1" style="background:gold;width:50px;height:50px;" onclick="alert(3)"></div>
<script>
	function dispatch(el, type){
		try{
			var evt = document.createEvent('Event');
			evt.initEvent(type,true,true);
			el.dispatchEvent(evt);
		}catch(e){alert(e)};
	}
	var btn1 = document.getElementById('btn1');
	var btn2 = document.getElementById('btn2');		
	var d1 = document.getElementById('d1');
	dispatch(btn1, 'click');
	dispatch(btn2, 'click');
	dispatch(d1, 'click');

</script>

 

 

依次弹出了1,2,3。换成其它事件添加方式亦可触发。

 

IE中还有个fireEvent去主动触发事件，当然如果是点击事件使用click更好。非点击事件则只能通过fireEvent去触发了。

最后给出我的triggerClick方法，实现方式判断浏览器，判断nodeName。依据是Safari/Chrome不支持非input/button元素的click方法。

 

function triggerClick( el ) {
	var nodeName = el.nodeName,
		safari_chrome = /webkit/.test(navigator.userAgent.toLowerCase());
	if(safari_chrome && (nodeName != 'INPUT' || nodeName != 'BUTTON')) {
		try{
			var evt = document.createEvent('Event');
			evt.initEvent('click',true,true);
			el.dispatchEvent(evt);
		}catch(e){alert(e)};
	}else{
		el.click();
	}
}

  

上面的实现方式让你能明白浏览器的差异，但实现其实有点罗嗦。直接判断元素是否具有click方法即可，Safari/Chrome中非input/button元素没有click方法，返回undefined。

 

 

 

function triggerClick( el ) {
	if(el.click) {
		el.click();
	}else{
		try{
			var evt = document.createEvent('Event');
			evt.initEvent('click',true,true);
			el.dispatchEvent(evt);
		}catch(e){alert(e)};		
	}
}

 

特性判断也比浏览器判断有更好的前瞻性，比如Safari/Chrome在后续版本中实现了非input/button元素的click方法，那么特性判断的函数仍然可以向下兼容。

 

如果是简单的内联方式,直接吊onclick怎么样：
btn.onclick();

当然这种方式适合于你的事件处理函数体内不需要用到特殊的变量如event等。

看了你们的方法，真想用咆哮体！！！！将灵活的api调用定格于click无异于固步自封。

最常用的模拟触发调用方法为，可适用于所有html元素及任何事件,调用方法是fireEvent(document.getElement("ID"), Event Name);

function fireEvent(target, eventName) {
    if (document.all) {
         target.fireEvent('on' + eventName);
    } else {
         var event = document.createEvent("HTMLEvents");
         event.initEvent(eventName, true, true);
         target.dispatchEvent(event);
    }
}

...........

请问可不可以触发某一点的单击事件啊  只有坐标 没有id