使用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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 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原生函数一定好吗?
2014/12/08 PHP
PHP进程同步代码实例
2015/02/12 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
js保存当前路径(cookies记录)
2010/12/14 Javascript
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
解析Javascript小括号“()”的多义性
2013/12/03 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
express 项目分层实践详解
2018/12/10 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
javascript实现时钟动画
2020/12/03 Javascript
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
Python迭代器与生成器用法实例分析
2018/07/09 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
Python中itertools的用法详解
2020/02/07 Python
python实现拼接图片
2020/03/23 Python
Python使用shutil模块实现文件拷贝
2020/07/31 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
苹果音乐订阅:Apple Music
2018/08/02 全球购物
学院领导推荐信
2013/10/30 职场文书
优秀员工自荐书范文
2013/12/08 职场文书
2014年会演讲稿范文
2014/01/06 职场文书
党章学习思想汇报
2014/01/14 职场文书
财务人员的自我评价范文
2014/03/03 职场文书
初中生毕业评语
2014/12/29 职场文书
尼克胡哲观后感
2015/06/08 职场文书
redis cluster支持pipeline的实现思路
2021/06/23 Redis