使用jquery模拟a标签的click事件无法实现跳转的解决


Posted in jQuery onDecember 04, 2018

问题描述

最近在使用jquery模拟a标签的click事件,无法触发其默认行为。即click()trigger('click')无法触发href跳转。

<a id="aBtn" href="https://www.car-me.com/">去卡咪官网</a>
$('#aBtn').click();//无法跳转,不生效
$('$aBtn').trigger('click');//同样无法跳转,不生效

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

问题原因

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

解决方案

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

原生dom触发click

<a id="aBtn" href="https://www.car-me.com/">去卡咪官网</a>
document.querySelector('#aBtn').click();//原生dom触发 或者
$('#aBtn')[0].click();//jquery对象转为dom对象再触发

利用子元素事件冒泡

<a id="aBtn" href="https://www.car-me.com/">
 <span id="spanBtn">去卡咪官网</span>
</a>
$('#spanBtn').click();//或者
$('#spanBtn').trigger('click');

jquery trigger()实现源码(8159行-8304行)

源码链接地址

关键摘要:

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

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

	// Native handler
	handle = ontype && cur[ ontype ];
	if ( handle && handle.apply && acceptData( cur ) ) {
		event.result = handle.apply( cur, data );
		if ( event.result === false ) {
			event.preventDefault();
		}
	}
}
// If nobody prevented the default action, do it now (8263行)
if ( !onlyHandlers && !event.isDefaultPrevented() ) {

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

		// Call a native DOM method on the target with the same name as the event.
		// Don't do default actions on window, that's where global variables be (#6170)
		if ( ontype && isFunction( elem[ type ] ) && !isWindow( elem ) ) {

			// Don't re-trigger an onFOO event when we call its FOO() method
			tmp = elem[ ontype ];

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

			// Prevent re-triggering of the same event, since we already bubbled it above
			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;
			}
		}
	}
}

总结

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

jQuery 相关文章推荐
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jquery css实现流程进度条
Mar 26 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 #jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 #jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 #jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 #jQuery
jQuery实现网页拼图游戏
Apr 22 #jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 #jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 #jQuery
You might like
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
JS如何实现文本框随文本的长度而增长
2015/07/30 Javascript
javascript中Date format(js日期格式化)方法小结
2015/12/17 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
bootstrap table复杂操作代码
2016/11/01 Javascript
微信小程序当前时间时段选择器插件使用方法详解
2018/12/28 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
微信小程序自定义胶囊样式
2020/12/27 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
Python使用matplotlib绘制动画的方法
2015/05/20 Python
用Django写天气预报查询网站
2018/10/21 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
Python eval的常见错误封装及利用原理详解
2019/03/26 Python
详解python中的模块及包导入
2019/08/30 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
关于Python解包知识点总结
2020/05/05 Python
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
2020/06/12 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
商务英语求职信范文
2015/03/19 职场文书
500字作文之关于爸爸
2019/11/14 职场文书