jquery click()执行a标签默认点击事件不生效。

红太狼 2021-07-05 01:25 737阅读 0赞

来看一下代码。

<a href="http://www.baidu.com" id="aa">跳转到百度</a>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script> setTimeout(() => { $('#aa').click(); }, 3000); </script>

很意外，没执行。我们来看一下jq源码。

click: { 
    	// For checkbox, fire native event so checked state will be right
    	trigger: function() { 
    		if ( this.type === "checkbox" && this.click && nodeName( this, "input" ) ) { 
    			this.click();
    			return false;
    		}
    	},
    	// For cross-browser consistency, don't fire native .click() on links
    	_default: function( event ) { 
    		return nodeName( event.target, "a" );
    	}
    }	
    /* *该方法用来判断elem是不是指定的标签元素name。 */
    function nodeName( elem, name ) { 
      return elem.nodeName && elem.nodeName.toLowerCase() === name.toLowerCase();
    };

通过阅读源码发现`jq`对`a`标签的`click`方法没有做处理,

下面我们来修改一下jq源码验证一下。

_default: function( event ) { 
    	return false  //不验证任何标签，都执行click回调。
    }

刷新页面是不是执行了。  
但是这种方式是不推荐的，不建议修改第三方库的源码。（如果你对源码很熟悉或是不担心修改会带来其他问题当我没说哈！）

推荐方式一：

document.getElementById(‘elemId’).click();

推荐方式二：

$(’#elemId’)[0].click();

是不是感觉方式一和方式二是一样的，没错，就是直接执行`dom`元素的`click`方法。

--------------------

## 使用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 `click()`方法模拟点击事件对`a`标签不生效的解决办法 ##

### 问题分析 ###

点击A标签本身，并不会触发跳转到指定链接的事件，就是说，我们平时都是点击的A标签中的文字了。 所以要想用JS模拟点击A标签事件，就得先往A标签中的文字添加能被JS捕获的元素，然后再用JS模拟点击该元素即可。  
打印`$(“a”)[0]`，得到的是`http://www.baidu.com`，但实际上`$(“a”)[0]`是一个`object`对象，或许说是**DOM对象**更贴切一些。

### 解决方案 ###

#### 解决方案一 ####

document.getElementById("abc ").click();

使用原生DOM元素操作`a`标签,调用原生`click()`方法;

#### 解决方案二 ####

$("#abc ")[0].click();

将jquery对象转换为原生DOM对象

### 总结 ###

`a`标签模拟点击事件需要使用原生`DOM`元素调用`click()`方法;jquery对象无法调用,因此推荐在以后的开发中尽量使用原生`DOM`对象模拟点击.