使用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.masonry瀑布流效果
May 25 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jQuery层叠选择器用法实例分析
Jun 28 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jQuery实现图片切换效果
Oct 19 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
PHP 截取字符串专题集合
2010/08/19 PHP
php如何实现只替换一次或N次
2015/10/29 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
CI框架简单分页类用法示例
2020/06/06 PHP
javascript 45种缓动效果 非常酷
2011/06/28 Javascript
javascript实现回车键提交表单方法总结
2015/01/10 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
详解Angular2中的编程对象Observable
2016/09/17 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
2017/08/18 Javascript
vue组件间通信子与父详解(二)
2017/11/07 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
python 多进程通信模块的简单实现
2014/02/20 Python
Python简单进程锁代码实例
2015/04/27 Python
使用Python保存网页上的图片或者保存页面为截图
2016/03/05 Python
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
python调用Delphi写的Dll代码示例
2017/12/05 Python
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法
2019/07/04 Python
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
求职信写作要突出重点
2014/01/01 职场文书
小学数学国培感言
2014/03/10 职场文书
学历公证委托书
2014/04/09 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
环保小标语
2014/06/13 职场文书
一份文言文检讨书
2014/09/13 职场文书
妈妈别哭观后感
2015/06/08 职场文书
承兑汇票延期证明
2015/06/23 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers