1. 程式人生 > >Javascript和jquery事件--點選事件和觸發超連結

Javascript和jquery事件--點選事件和觸發超連結

前面的不過是一些基礎的知識,真正的一些事件還是有點不同。還有一些名稱空間的問題。不過現在ie也開始接受W3C標準,而且平時開發也很少考慮ie了,一些事件就不考慮ie了。

點選事件--click

  大部分問題出現在js、jq觸發超連結上面。我之前看到的解釋是谷歌新版本阻止了觸發瀏覽器預設的操作(超連結、右鍵等等),但是在下面參考的一篇文章又提出是因為要觸發超連結點選的不是<a>元素,而是<a>元素裡面的內容,我覺得比較靠譜,因為網上不少jq有關操作做的都是相關的改變,但是這個方法在js中無用,大致的方法有如下幾種。

在Js中:

    a)  無法觸發超連結,只觸發了給a標籤繫結的’click’監聽器(標準方法)

var evt = document.createEvent( 'HTMLEvents' );

evt.initEvent('click', true, true);

document.getElementById('test').dispatchEvent(evt);//無法觸發超連結a

 

    b)  給a標籤裡面添加了一個空的<span></span>,然後使用相同方法不可以觸發

document.getElementById('test').childNodes[0].dispatchEvent(evt);//無法觸發超連結a

 

    c) 使用MouseEvent可以觸發,不太清楚MouseEvents和event的區別。

var event = document.createEvent('MouseEvents');

event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

document.getElementById('test').dispatchEvent(event);//可以觸發超連結a

    

    d) 使用click()可以觸發,這個我是真的不明白了,網上也還沒有查到更多的解釋,無論在js還是jq,好像它就理所當然地可以代替addEventListener進行監聽器繫結,然而又區別於onclick,然後又理所當然地可以替代dispatchEvent()進行事件觸發,而且不受是不是超連結限制。我之前用的最多的也是它,也有一些與它相似的事件,大概都出現在表單元素中,到時候再統一看看。

document.getElementById('test').click();//可以觸發超連結a

在jq中:

    a) 無法觸發超連結,只觸發了給a標籤繫結的’click’監聽器(標準方法)

$('#test').trigger('click');//無法觸發超連結a

 

    b) 給a標籤裡面添加了一個空的<span></span>,然後使用相同方法可以觸發

$('#test span').trigger('click');//不可以觸發超連結a

 

  c) 依舊是click()觸發,不過除了js中的疑問,又多了一個疑問。由於之前所說是點選內容觸發,$(‘#test’).click();不能觸發,$(‘#test’)[0].click()能觸發,即使#test對應的a標籤沒有子元素我都能理解。但是我依稀記得引發我對超連結思考的事故就發生在$a[0].click()失效啊。

我回去看了一下,下面的一段程式碼在http訪問火狐瀏覽器的確是無效的,我也不知道為什麼,反正就是不能用。

        

var $a = $("<a></a>").attr("href", 'worker.js').attr('target','_blank');

 $a[0].click();//在火狐瀏覽器中通過http訪問時無效

 

參考:

http://www.cnblogs.com/kevinge/p/4803786.html

https://smartblack.iteye.com/blog/608477