js javascript 模擬點擊 超級鏈接點擊 轉

轉自：http://mo2g.com/view/42/

我嘗試過多次用jQuery模擬用戶點擊a標簽的功能，但都沒有成功，並且困擾了很久。前段時間的一次發呆，冒出了新的想法，於是就動手進行了測試。

先看下邊的代碼：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

< html > < head > < meta  charset = "UTF-8" > < title >磨途歌-A標簽測試1</ title > </ 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 17 18 19

< html > < head > < meta  charset = "UTF-8" > < title >磨途歌-A標簽測試2</ title > </ 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模擬點擊該元素即可。

---

2015年6月15日，根據@bl的補充，我們可以使用更加簡單的方式實現同樣的功能，代碼如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

< html > < head > < meta  charset = "UTF-8" > < title >磨途歌-A標簽測試3</ title > </ 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($) {      $("a")[0].click(); }); </ script >

打印$("a")[0]，得到的是http://www.mo2g.com，但實際上$("a")[0]是一個object對象，或許說是DOM對象更貼切一些。經過測試發現，其實原生的js就已經實現了類似的點擊a標簽的功能。原生js寫法類似如下：

1	document.getElementsByTagName( "a" )[0].click();

只要獲取到A標簽的DOM對象，就能使用click()函數激活點擊事件了。