JavaScript主动触发单击事件
本文由 小茗同学 发表于 2016-07-07 浏览(10849)
最后修改 2021-08-19 标签:javascript input file 单击 click

方法一:HTMLElement.click()

HTMLElement.click(),参考:https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/click , 比如a.click(),此方法最简单最方便,基本上没什么兼容性问题(IE5.5+,Chrome9+):

特殊情况:js触发input[file]的单击事件

原文写于:2014-06-18

想要通过ele.click()触发某个input[file]的click事件,直接执行不会有效果(包括直接在控制台执行代码或者计时器延时调用均不生效),但是放到某个a标签或者按钮的单击事件上却有效!也就是说必须用户主动去单击某个东西才能触发文本框的单击事件

演示:A标签直接打开文件窗口:

<input id="test" type="file" style="display:none;"/>
<a href="javascript:browse();">浏览</a>
<script type="text/javascript">
function browse()
{
	document.getElementById('test').click();
}
</script>

备注:后面提到的方法二也无法直接控制台唤起file对话框,只能用户主动触发才可以。

方法二

通过MouseEvent来触发单击事件,具体兼容性也没有测试,但理论上比上面的好:

/**
 * 考虑兼容性的触发单击事件
 * @param elem 要触发单击事件的DOM对象
 */
function fireClickEvent(elem)
{
	var event;
	if(window.MouseEvent) event = new MouseEvent('click');
	else
	{
		event = document.createEvent('MouseEvents');
		event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
	}
	elem.dispatchEvent(event);
}

延伸阅读

JS弹出下载对话框以及实现常见文件类型的下载