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

 更新时间:2018年12月04日 14:11:02   作者:单骑入西蜀  
这篇文章主要给大家介绍了关于使用jquery模拟a标签的click事件无法实现跳转的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

问题描述

最近在使用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使用after()方法在元素后面添加多项内容的方法

    jQuery使用after()方法在元素后面添加多项内容的方法

    这篇文章主要介绍了jQuery使用after()方法在元素后面添加多项内容的方法,实例分析了jQuery中after方法的功能及在元素后面添加内容的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-03-03
  • Jquery实战_读书笔记1—选择jQuery

    Jquery实战_读书笔记1—选择jQuery

    近期公司积极组织我们这些开发人员学习进步,督促我们学习更多的技术来提高自己。为此我选择了jQuery作为我学习的方向,同时我也是想将我的学习心得分享给大家,以后我会不断的更新一系列jQuery方面的学习纪要,帮助大家学习。
    2010-01-01
  • jquery插件实现图片对比

    jquery插件实现图片对比

    这篇文章主要为大家详细介绍了jquery插件实现图片对比,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • jQuery 选择器用法基础入门示例

    jQuery 选择器用法基础入门示例

    这篇文章主要介绍了jQuery 选择器用法,结合实例形式详细分析了jQuery选择器的基本功能、使用方法及操作注意事项,需要的朋友可以参考下
    2020-01-01
  • EasyUI创建人员树的实例代码

    EasyUI创建人员树的实例代码

    最近做项目做一个树状的下拉列表,下面小编把easyUI创建人员树的实现代码分享到脚本之家平台,需要的朋友参考下吧
    2017-09-09
  • 分享几个超级震憾的图片特效

    分享几个超级震憾的图片特效

    这次主要是来分享几个个人觉得十分震憾的图片特效,有jQuery的,有CSS3的,有很萌的乌鸦动画,也有简单朴实的图片播放动画,当然有些你可能已经看到过了,不过也没关系,你能路过就算是对我的支持了
    2012-01-01
  • 基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码

    基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码

    在ipad、iphone网页开发中,我们很可能需要判断是横屏或者竖屏。下面就来介绍如何用 jQuery 判断iPad、iPhone、Android是横屏还是竖屏的方法
    2014-05-05
  • 利用jquery实现实时更新歌词的方法

    利用jquery实现实时更新歌词的方法

    这篇文章主要给大家介绍了如何利用jquery实现实时更新歌词的方法,文中给出了详细的实现思路和示例代码,对大家的参考借鉴具有一定的价值,有需要的朋友下面来跟着小编一起学习学习吧。
    2017-01-01
  • jquery分页优化操作实例分析

    jquery分页优化操作实例分析

    这篇文章主要介绍了jquery分页优化操作,在前文jQuery分页显示的基础上实现了避免频繁查询的相关优化操作技巧,需要的朋友可以参考下
    2019-08-08
  • jQuery实现base64前台加密解密功能详解

    jQuery实现base64前台加密解密功能详解

    这篇文章主要介绍了jQuery实现base64前台加密解密功能,结合实例形式分析了jquery.base64.js实现前台base64加密与解密功能的实现方法,并给出了java实现后台base64加密解密的操作示例对比验证加密效果,需要的朋友可以参考下
    2017-08-08

最新评论