今天作表格前臺導出到xls時,想自動觸發a的點擊。但失敗。最後找到這個文件。html
我嘗試過屢次用jQuery模擬用戶點擊a標籤的功能,但都沒有成功,而且困擾了好久。前段時間的一次發呆,冒出了新的想法,因而就動手進行了測試。jquery
先看下邊的代碼:ajax
1api 2瀏覽器 3安全 4app 5測試 6google 7spa 8 9 10 11 12 13 14 15 16 17 |
<html> <head>磨途歌-A標籤測試1<head> <body> <a href="http://blog.mo2g.com">磨途歌<a> </body> </html> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"><script> <script> jQuery(function($) { //給全部A標籤綁定點擊觸發事件 $('a').click(function() { alert(1); }); //觸發全部A標籤的點擊事件 $('a').click(); }); </script> |
上邊的代碼確實已經觸發了點擊A標籤事件,但你們必定也會有疑問,爲何點擊了A標籤,卻不觸發A標籤的跳轉事件?
一開始還覺得是瀏覽器作了相應的安全措施,屏蔽了JS對A標籤的操做,後來發現,並非這樣的,接下來就說說其中的原委。
在開始解釋前,我先拋出一個問題。在咱們點擊「A標籤」的時候,到底是點擊了什麼才發生的跳轉?
1)點擊的是「A標籤」自己?
2)點擊的是「A標籤」中顯示的文字?
說到這裏,你們應該明白了,咱們上邊的代碼已經證明了點擊A標籤自己,並不會觸發跳轉到指定連接的事件,就是說,咱們平時都是點擊的A標籤中的文字了?
既然有了頭緒,那麼就來動手試試。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html> <head>磨途歌-A標籤測試2<head> <body> <a href="http://www.mo2g.com">磨途歌<a> </body> </html> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"><script> <script> jQuery(function($) { var mo2g = '<span id="mo2g">磨延城<span>'; //給A標籤中的文字添加一個能被jQuery捕獲的元素 $('a').append(mo2g); //模擬點擊A標籤中的文字 $('#mo2g').click(); }); </script> |
這下效果出來了,事實證實了上述的推斷是正確的,因此要想用JS模擬點擊A標籤事件,就得先往A標籤中的文字添加能被JS捕獲的元素,而後再用JS模擬點擊該元素便可。