使用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实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
jquery实现拖拽添加元素功能
Dec 01 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获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
php中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
深入浅析php json 格式控制
2015/12/24 PHP
PHP去除字符串最后一个字符的三种方法实例
2017/03/01 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
php实现算术验证码功能
2018/12/05 PHP
一些有关检查数据的JS代码
2006/09/07 Javascript
禁止js文件缓存的代码
2010/04/09 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
js在IE与firefox的差异集锦
2014/11/11 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
2019/05/16 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
[01:19:23]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第二场
2018/04/06 DOTA
Python入门篇之文件
2014/10/20 Python
python动态性强类型用法实例
2015/05/09 Python
python reverse反转部分数组的实例
2018/12/13 Python
Python实现计算字符串中出现次数最多的字符示例
2019/01/21 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
python计算无向图节点度的实例代码
2019/11/22 Python
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
资金主管岗位职责范本
2014/03/04 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
服务理念标语
2014/06/18 职场文书
2015年女生节活动总结
2015/02/27 职场文书
Nginx反向代理、重定向
2022/04/13 Servers
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL