使用jquery模擬a標(biāo)簽的click事件無法實現(xiàn)跳轉(zhuǎn)的解決
問題描述
最近在使用jquery模擬a標(biāo)簽的click事件,無法觸發(fā)其默認(rèn)行為。即click()
或trigger('click')
無法觸發(fā)href跳轉(zhuǎn)。
<a id="aBtn" >去卡咪官網(wǎng)</a> $('#aBtn').click();//無法跳轉(zhuǎn),不生效 $('$aBtn').trigger('click');//同樣無法跳轉(zhuǎn),不生效
下面就來一起分析下其原因與解決方法吧
問題原因
jquery內(nèi)部實現(xiàn)click或trigger方法時,并未真正模擬用戶點(diǎn)擊事件,只是模擬了事件對象及冒泡的觸發(fā)。(最后附有jquery實現(xiàn)源碼供參考)
解決方案
解決思路:在原生dom觸發(fā)click事件或利用事件冒泡來解決。
原生dom觸發(fā)click
<a id="aBtn" >去卡咪官網(wǎng)</a> document.querySelector('#aBtn').click();//原生dom觸發(fā) 或者 $('#aBtn')[0].click();//jquery對象轉(zhuǎn)為dom對象再觸發(fā)
利用子元素事件冒泡
<a id="aBtn" > <span id="spanBtn">去卡咪官網(wǎng)</span> </a> $('#spanBtn').click();//或者 $('#spanBtn').trigger('click');
jquery trigger()實現(xiàn)源碼(8159行-8304行)
關(guān)鍵摘要:
// 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()時,會調(diào)用緩存列表里的事件回調(diào)函數(shù),但未執(zhí)行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(),會執(zhí)行elem.click()****** elem[ type ](); if ( event.isPropagationStopped() ) { lastElement.removeEventListener( type, stopPropagationCallback ); } jQuery.event.triggered = undefined; if ( tmp ) { elem[ ontype ] = tmp; } } } }
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
- jquery 給動態(tài)生成的標(biāo)簽綁定事件的幾種方法總結(jié)
- jQuery動態(tài)添加li標(biāo)簽并添加屬性和綁定事件方法
- 詳談jQuery unbind 刪除綁定事件 / 移除標(biāo)簽方法
- jquery 為a標(biāo)簽綁定click事件示例代碼
- jquery trigger偽造a標(biāo)簽的click事件取代window.open方法
- 使用JS或jQuery模擬鼠標(biāo)點(diǎn)擊a標(biāo)簽事件代碼
- jquery觸發(fā)a標(biāo)簽跳轉(zhuǎn)事件示例代碼
- Struts2的s:radio標(biāo)簽使用及用jquery添加change事件
- jQuery實現(xiàn)動態(tài)添加標(biāo)簽事件
- JQuery?綁定select標(biāo)簽的onchange事件,彈出選擇的值,并實現(xiàn)跳轉(zhuǎn)、傳參
相關(guān)文章
jQuery獲取CSS樣式中的顏色值的問題,不同瀏覽器格式不同的解決辦法
jQuery獲取CSS樣式中的顏色值的問題,不同瀏覽器格式不同的解決辦法,需要的朋友可以參考一下2013-05-05jquery實現(xiàn)清新實用的網(wǎng)頁菜單效果
這篇文章主要介紹了jquery實現(xiàn)清新實用的網(wǎng)頁菜單效果,涉及jquery通過鼠標(biāo)事件控制頁面元素的動態(tài)隱藏與顯示實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08簡單易擴(kuò)展可控性強(qiáng)的Jquery轉(zhuǎn)盤抽獎程序
今天小編就為大家分享一篇關(guān)于簡單易擴(kuò)展可控性強(qiáng)的Jquery轉(zhuǎn)盤抽獎程序,小編覺得內(nèi)容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧2019-03-03jquery鼠標(biāo)滑過提示title具體實現(xiàn)代碼
這篇文章介紹了jquery鼠標(biāo)滑過提示title具體實現(xiàn)代碼,有需要的朋友可以參考一下2013-08-08jQuery中iframe的操作(點(diǎn)擊按鈕新增窗口)
<iframe>也應(yīng)該是框架的一種形式,它與<frame>不同的是,iframe可以嵌在網(wǎng)頁中的任意部分。本文給大家介紹jQuery中iframe的操作(點(diǎn)擊按鈕新增窗口),需要的朋友參考下吧2016-04-04jQuery事件_動力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了jQuery事件的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07jQuery實現(xiàn)中獎播報功能(讓文本滾動起來) 簡單設(shè)置數(shù)值即可
這篇文章主要介紹了jQuery實現(xiàn)中獎播報功能(讓文本滾動起來) 簡單設(shè)置數(shù)值即可,文中通過實例代碼給大家詳細(xì)介紹,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03jQuery插件HighCharts繪制2D半圓環(huán)圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D半圓環(huán)圖效果,結(jié)合實例形式分析了jQuery使用HighCharts插件繪制半圓環(huán)圖形的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jQuery實現(xiàn)兩款有動畫功能的導(dǎo)航菜單代碼
這篇文章主要介紹了jQuery實現(xiàn)兩款有動畫功能的導(dǎo)航菜單代碼,涉及jQuery動畫效果的不同實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09jQuery基于函數(shù)重載實現(xiàn)自定義Alert函數(shù)樣式的方法
這篇文章主要介紹了jQuery基于函數(shù)重載實現(xiàn)自定義Alert函數(shù)樣式的方法,涉及jQuery函數(shù)重載及頁面元素屬性動態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-07-07