去卡咪官网
$('#aBtn').click();//无法跳转,不生效
$('$aBtn').trigger('click');//同样无法跳转,不生效

下面就来一起分析下其原因与解决方法吧

问题原因

jquery内部实现click或trigger方法时,并未真正模拟用户点击事件,只是模拟了事件对象及冒泡的触发。(最后附有jquery实现源码供参考)

解决方案

解决思路:在原生dom触发click事件或利用事件冒泡来解决。

原生dom触发click

去卡咪官网
document.querySelector('#aBtn').click();//原生dom触发或者
$('#aBtn')[0].click();//jquery对象转为dom对象再触发

利用子元素事件冒泡


去卡咪官网

$('#spanBtn').click();//或者
$('#spanBtn').trigger('click');

jquerytrigger()实现源码(8159行-8304行)

源码链接地址

关键摘要:

//Firehandlersontheeventpath(8237行)
i=0;
while((cur=eventPath[i++])&&!event.isPropagationStopped()){
	lastElement=cur;
	event.type=i>1?
		bubbleType:
		special.bindType||type;

	//jQueryhandler
	handle=(dataPriv.get(cur,"events")||{})[event.type]&&
		dataPriv.get(cur,"handle");
	if(handle){
	//******自身trigger('click')或click()时,会调用缓存列表里的事件回调函数,但未执行elem.click()******
		handle.apply(cur,data);
	}

	//Nativehandler
	handle=ontype&&cur[ontype];
	if(handle&&handle.apply&&acceptData(cur)){
		event.result=handle.apply(cur,data);
		if(event.result===false){
			event.preventDefault();
		}
	}
}
//Ifnobodypreventedthedefaultaction,doitnow(8263行)
if(!onlyHandlers&&!event.isDefaultPrevented()){

	if((!special._default||
		special._default.apply(eventPath.pop(),data)===false)&&
		acceptData(elem)){

		//CallanativeDOMmethodonthetargetwiththesamenameastheevent.
		//Don'tdodefaultactionsonwindow,that'swhereglobalvariablesbe(#6170)
		if(ontype&&isFunction(elem[type])&&!isWindow(elem)){

			//Don'tre-triggeranonFOOeventwhenwecallitsFOO()method
			tmp=elem[ontype];

			if(tmp){
				elem[ontype]=null;
			}

			//Preventre-triggeringofthesameevent,sincewealreadybubbleditabove
			jQuery.event.triggered=type;

			if(event.isPropagationStopped()){
				lastElement.addEventListener(type,stopPropagationCallback);
			}
//******子元素trigger('click')或click(),会执行elem.click()******
			elem[type]();

			if(event.isPropagationStopped()){
				lastElement.removeEventListener(type,stopPropagationCallback);
			}

			jQuery.event.triggered=undefined;

			if(tmp){
				elem[ontype]=tmp;
			}
		}
	}
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对毛票票的支持。

热门推荐

1 毛坯房验收经验和常识 看了之后再验房心里有底
2 二手房收房如何交接 二手房收房注意问题
3 专业验收毛坯房的价格 商品房验收合格的标准
4 精装房怎么验收 精装房请验房师有用吗
5 一般要到哪里找验房师 验房师有哪些作用呢
6 请人验房一般是多少钱 验房师费用是多少
7 怎样测量房子面积 建筑面积和使用面积怎么算
8 收房需要注意什么 仔细检查不松懈
9 收房时三书一证一表是什么 主要作用介绍
10 交房时交房税费有哪些 本文为你一一讲解
11 验房都需要验什么 要做哪些准备呢
12 毛坯房验房师有必要请吗 毛坯房装修完如何验收
13 地下室防水工程质量验收规范详解
14 水性涂料、油性涂料区别介绍
15 零基础布艺DIY工坊 教你做超萌猫头鹰钥匙包
16 三棵树漆怎么样?三棵树漆官方网站
17 家庭“装修套餐”中猫腻你知道吗?
18 小空间大浴望 卫浴间装修巧支招