如何模擬click事件,打開一個a標簽鏈接?


在項目開發過程中,我們經常會碰到通過接口返回一個地址,同時在新的tab頁面打開一個網址的情況,最直觀的想法就是通過window.open(url)的方式,打開一個新的頁面,但是大部分瀏覽器會遭遇攔截。因為大部分現代的瀏覽器(泛指 Chrome / Firefox / IE 10+ / Safari)都默認開啟了阻止彈出窗口的策略,原因是 window.open 被廣告商濫用,嚴重影響用戶的使用。這個阻止彈出窗口的操作,並不是直接封殺 windw.open(),而是會根據用戶的行為來判斷這次 window.open() 是否屬於流氓操作。

但是對用戶來說,不能要求用戶都來通過攔截。何況當出現攔截時,很多小白根本不知道發生了啥,不知道在哪里看被攔截的頁面,百思不得其解,因此我們還是要通過代碼來解決這個問題。

方式一:jQuery來幫忙

大部分前端開發都對jQuery比較熟悉,所以我們先以jQuery解決這個問題。jquery是提供了模擬click事件的方法的,$(selector).click()。只不過這里我們要注意的是當要觸發a標簽點擊的時候,<a>標簽內一定要有內容,並且要模擬里面的內容被點擊而不是<a></a>被點擊。

jsfiddle代碼地址

方式二:HTMLElement.click()

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

按照文檔里面的介紹,HTMLElement.click()是用來模擬click的方法。這種方法的兼容性如下。

PC

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 20[3] (Yes) 5[1] (Yes) (Yes)[2] 6[3]
input@file (limited) (Yes) (Yes) 4 (Yes) 12.10 (Yes)
input@file (full) (Yes) (Yes) 4 (Yes) No support (Yes)

 

Mobile

Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support No support ? (Yes) ? ? ? ?

 

jsfiddle代碼地址

方式三:createEvent + initEvent + dispatchEvent

document.createEvent用於創建事件,在DOM Level 2 的事件中就有HTMLEvents,MouseEvents,UIEvents事件類型。

initEvent()方法用於初始化通過DocumentEvent接口創建的Event的值。

dispatchEvent則是觸發對應元素上面的某個事件。

參考自stackoverflow

jsfiddle代碼地址

方式四:后端重定向

這種方式需要后端協作,先提供一個接口地址,前端通過a標簽跳轉到該地址,后端通過運算之后,直接重定向到目標地址,這也是方便快捷的方法。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM