Jquery emulates the click event of a tag and cannot jump

Problem description

Using jquery to simulate the CLICK event of a tag cannot trigger its default behavior. That is, click() or trigger(‘click’) cannot trigger an href jump.

< a id = "aBtn" href = "https://www.car-me.com/" > to card the mi website < / a > $(' # aBtn). Click (); $('$aBtn').trigger('click'); // Also cannot jump, does not take effectCopy the code

Question why

When you implement the Click or trigger methods internally, jquery doesn’t really simulate the user clicking event, just the event object and the bubbling trigger. (Finally, jquery implementation source code is attached for reference)

The solution

Trigger the Click event in the native DOM or use event bubbling.

1. Native DOM triggers Click

<a href="https://www.car-me.com/"> document.querySelector('#aBtn').click(); // Native DOM trigger or $('#aBtn')[0].click(); // The jquery object is converted into a DOM objectCopy the code

2. Use child element events to bubble

< a id = "aBtn" href = "https://www.car-me.com/" > < span id = "spanBtn" > to card the mi website < / span > < / a > $(' # spanBtn). Click (); / / or $(' # spanBtn). The trigger (" click ");Copy the code

Jquery trigger() implementation source (lines 8159 -8304)

Source code link

Key Summary:

// Fire Handlers on the event path (line 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 ) {
	/ / * * * * * * itself trigger (' click ') or click (), invokes the cache list event callback function, but does not perform 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(); }}}Copy the code

// If nobody prevents the default action, do it now (8263 line)
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 );
			}
            / / * * * * * * child element trigger (' click ') or click (), performs elem. Click () * * * * * *
			elem[ type ]();

			if ( event.isPropagationStopped() ) {
				lastElement.removeEventListener( type, stopPropagationCallback );
			}

			jQuery.event.triggered = undefined;

			if( tmp ) { elem[ ontype ] = tmp; }}}}Copy the code