欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript 模擬用戶單擊事件

 更新時間:2009年12月31日 20:13:49   作者:  
單擊一個按鈕或超鏈接,然后會出現(xiàn)其他的超鏈接,這時要讓其中的一個超鏈接被單擊,以顯示一個初始頁面。(公司頁面使用了frameset)很顯然,之后的超鏈接單擊事件需要通過JavaScript來觸發(fā)。
一開始,我想到了用jQuery的click()事件來觸發(fā)超鏈接的單擊事件(與trigger("click")一樣的效果)。結(jié)果發(fā)現(xiàn)不如人意。

實例如下:
效果圖
IE:

FireFox:
 

復(fù)制代碼 代碼如下:

<h3>請單擊”Click Me"。測試提交按鈕與超鏈接是否也被單擊了。</h3>
    <button id="btn">Click Me</button>
    <form action="#">
        <input type="text" name="userName" value="徐新華-polaris" readonly/>
        <input id="submit" type="submit" value="別點擊此按鈕提交" onclick="alert('觸發(fā)了提交按鈕的單擊事件!');"/>
    </form>
    <a id="aLink" onclick = "alert('觸發(fā)了超鏈接的單擊事件!');">代碼觸發(fā)超鏈接</a>

復(fù)制代碼 代碼如下:

$(function()
{
    $("#btn").click(function()
    {
        $("#submit").click();
        $("#aLink").click();
    });
});

當(dāng)單擊:Click Me按鈕時,先后彈出提交按鈕被單擊、超鏈接被單擊的對話框,這表明兩者的單擊事件都被觸發(fā)了。然而,從地址欄中可以看到,提交按鈕的單擊事件觸發(fā)后,執(zhí)行了它的默認行為:提交表單;可是超鏈接的單擊事件觸發(fā)后,并沒有鏈接到目標(biāo)地址。(不要懷疑說是提交按鈕的提交地址對超鏈接有影響,因為我去掉提交按鈕,只留下超鏈接也不會鏈接到目標(biāo)地址。)

也許jQuery中的click()方法對超鏈接的單擊事件并沒有使其執(zhí)行瀏覽器的默認行為(即使你手動加入return true也沒有用)。注意:tigger("click")與click()一樣的。jQuery文檔中說“這個函數(shù)也會導(dǎo)致瀏覽器同名的默認行為的執(zhí)行”。同名的?不太明白,但是超鏈接的確不能執(zhí)行它的默認行為。這是,只能想另外的方法——拋棄jQuery提供的事件。

回到JavaScript自己的事件——click。代碼如下:
復(fù)制代碼 代碼如下:

$(function()
{
    $("#btn").click(function()
    {
        $("#submit").click();
        $("#aLink").get(0).click();
    });
});

在IE中一測試,通過了……有點興奮??墒牵趂ireFox中卻提示:click()不是一個function。說真的,IE瀏覽器提供的東西對開發(fā)人員來說很好,而fireFox卻沒有,比如之前說到的onpropertychange等。不過,我們必須的考慮IE之外的瀏覽器。在網(wǎng)上查資料,有不少人提到在fireFox中要用代碼觸發(fā)一個事件,需要如下處理:
復(fù)制代碼 代碼如下:

var evt = document.createEvent("MouseEvents");
evt.initEvent("click", false, false);// 或用initMouseEvent(),不過需要更多參數(shù)
$("#aLink").get(0).dispatchEvent(evt);

按以上方法來實現(xiàn)我想要的功能,代碼如下:
復(fù)制代碼 代碼如下:

$(function()
{
    $("#btn").click(function()
    {
        $("#submit").click();

        if($.browser.msie)
        {
            $("#aLink").get(0).click();
        }
        else
        {
            var evt = document.createEvent("MouseEvents");
            evt.initEvent("click", false, false);
            $("#aLink").get(0).dispatchEvent(evt);
        }
    });
});

這時,在IE中是完全正常的。然而,在fireFox中的情況與直接使用jQuery的click()事件一樣,能觸發(fā)單擊事件,超鏈接卻沒有轉(zhuǎn)到目標(biāo)地址(注意:提交按鈕用此方法也是能夠提交的,我想jQuery的click()的實現(xiàn)大概是這樣實現(xiàn)的吧)。哎,覺得還是IE好。呵呵。

如此一來,這種方法仍然不能解決FireFox中的問題。得繼續(xù)尋找其他方法。

既然在fireFox中能夠觸發(fā)單擊事件,卻不能轉(zhuǎn)到超鏈接的目標(biāo)地址,那么,可以用js來實現(xiàn)跳轉(zhuǎn),即:使用location對象。代碼如下:
復(fù)制代碼 代碼如下:

$(function()
{
    $("#btn").click(function()
    {
        $("#submit").click();

        if($.browser.msie)
        {
            $("#aLink").get(0).click();
        }
        else
        {
            // 綁定單擊事件
            $("#aLink").click(function()
            {
                document.location = $(this).attr("href");// window.location = $(this).attr("href");也可以,但是執(zhí)行的時間不同
            });

            // 觸發(fā)單擊事件
            $("#aLink").click();
        }
    });
});

這樣就大功告成。有一個地方要說明一下:document.location與window.location。這兩個都可以,然而他們的執(zhí)行時間不同,window的執(zhí)行時間較早。讀者可以自己試試。

雖然實現(xiàn)了這個例子,然而,運用到項目中卻出問題了,因為項目中使用了frameset(雖然現(xiàn)在很多人不建議使用frameset,但項目用了也沒辦法,得這樣做)。因此需要指定鏈接的目標(biāo)url在哪個frame中顯示,然而,通過<a>中的target是無法實現(xiàn)的,因為<a>根本不會執(zhí)行默認行為,需要通過js來實現(xiàn)。

我們知道,document代表當(dāng)前的頁面(當(dāng)前執(zhí)行元素所在頁面)。如果我們能夠找到當(dāng)前超鏈接的url希望放入的frame,我們就可以找到它對象的document。當(dāng)然找到超鏈接url希望放入的frame很容易,這是由你自己決定將其放到哪的。示例代碼如下:
復(fù)制代碼 代碼如下:

window.parent.frames['view'].document.location = $("#aLink").attr("href");

其中,'view'是超鏈接url希望放入的frame的name或id(最好是id和name命名一樣)。建議IE中別用上面的方法,而用前面介紹的click()方法。

現(xiàn)在已經(jīng)解決了所有的問題??赡苓€有人會有這種需求:就是在<a>中寫上target,如<a target="_blank"></a>之類的。希望按target的要求觸發(fā)超鏈接。當(dāng)然,這是非IE瀏覽器有的問題。

實際上,下面我要介紹的方法是通用行的??梢蕴娲鷚indow.parent.frames['view'].document.location。代碼如下:
復(fù)制代碼 代碼如下:

window.open($(this).attr("href"),$(this).attr("target"));

如果沒有定義target屬性,默認會當(dāng)成'_blank'處理,這與用戶單擊超鏈接的效果不一樣。這種方式是跨瀏覽器的,所以,只需要要用這種方式即可。這時,回到用jQuery+原始JavaScirpt來實現(xiàn),這時最終、個人認為最好的方法。完整最終代碼如下:
復(fù)制代碼 代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript模擬用戶單擊事件——徐新華 polaris</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!-- 引入jQuery -->
    <script type="text/javascript" src="scripts/jQuery/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        /**
        * 模擬用戶單擊事件 處理超鏈接的問題
        * @author xuxinhua
        */
        $(function()
        {
            $("#btn").click(function()
            {
                $("#submit").click();

                // 綁定單擊事件
                $("#aLink").click(function()
                {
                    window.open($(this).attr("href"),$(this).attr("target"));
                });

                // 觸發(fā)單擊事件(會執(zhí)行所有綁定的單擊事件處理函數(shù))
                $("#aLink").click();
            });
        });
    </script>
</head>

<body>
    <h3>請單擊”Click Me"。測試提交按鈕與超鏈接是否也被單擊了。</h3>
    <button id="btn">Click Me</button>
    <form action="#">
        <input type="text" name="userName" value="徐新華-polaris" readonly/>
        <input id="submit" type="submit" value="別點擊此按鈕提交" onclick="alert('觸發(fā)了提交按鈕的單擊事件!');"/>
    </form>
    <a id="aLink" target="_self" onclick = "alert('觸發(fā)了超鏈接的單擊事件!');">代碼觸發(fā)超鏈接</a>
</body>

</html>

復(fù)制代碼 代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript模擬用戶單擊事件——徐新華 polaris</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!-- 引入jQuery -->
    <script type="text/javascript" src="scripts/jQuery/jquery-1.3.2.js"></script>
    <script type="text/javascript"><!--
        /**
        * 模擬用戶單擊事件 處理超鏈接的問題
        * @author xuxinhua
        */
        $(function()
        {
            $("#btn").click(function()
            {
                $("#submit").click();

                // 綁定單擊事件
                $("#aLink").click(function()
                {
                    window.open($(this).attr("href"),$(this).attr("target"));
                });

                // 觸發(fā)單擊事件(會執(zhí)行所有綁定的單擊事件處理函數(shù))
                $("#aLink").click();
            });
        });

// --></script>
</head>
<body>
    <h3>請單擊”Click Me"。測試提交按鈕與超鏈接是否也被單擊了。</h3>
    <button id="btn">Click Me</button>
    <form action="#">
        <input type="text" name="userName" value="徐新華-polaris" readonly/>
        <input id="submit" type="submit" value="別點擊此按鈕提交" onclick="alert('觸發(fā)了提交按鈕的單擊事件!');"/>
    </form>
    <a id="aLink" target="_self" onclick = "alert('觸發(fā)了超鏈接的單擊事件!');">代碼觸發(fā)超鏈接</a>
</body>
</html>

注意:需要此處需要先綁定一個click處理函數(shù),然后再觸發(fā)click事件
總結(jié):
網(wǎng)上有一些JavaScript模擬用戶單擊事件的文章,但是都不全面,總會有這樣那樣的問題。雖然,我在此列舉了眾多的方法,覺得基本的問題都應(yīng)該解決了,然而還是有可能有人遇到新的問題。如果遇到什么問題,可以跟我一起探討……

相關(guān)文章

  • JS瀏覽器BOM常見操作實例詳解

    JS瀏覽器BOM常見操作實例詳解

    這篇文章主要介紹了JS瀏覽器BOM常見操作,結(jié)合實例形式詳細分析了JS瀏覽器BOM模型元素常見操作技巧與使用注意事項,需要的朋友可以參考下
    2020-04-04
  • 教你巧用?import.meta?實現(xiàn)熱更新的問題

    教你巧用?import.meta?實現(xiàn)熱更新的問題

    import.meta?是一個給?JavaScript?模塊暴露特定上下文的元數(shù)據(jù)屬性的對象,它包含了這個模塊的信息,這篇文章主要介紹了巧用?import.meta?實現(xiàn)熱更新的問題,需要的朋友可以參考下
    2022-04-04
  • js實現(xiàn)一鍵復(fù)制功能

    js實現(xiàn)一鍵復(fù)制功能

    本文主要介紹了js實現(xiàn)一鍵復(fù)制功能的方法,具有很好的參考價值。下面跟著小編一起來看下吧
    2017-03-03
  • JavaScript實現(xiàn)存儲HTML字符串示例

    JavaScript實現(xiàn)存儲HTML字符串示例

    這篇文章主要介紹了JavaScript存儲HTML字符串的具體實現(xiàn),需要的朋友可以參考下
    2014-04-04
  • JavaScript判斷對象、數(shù)組是否包含某個屬性、某個值的方法

    JavaScript判斷對象、數(shù)組是否包含某個屬性、某個值的方法

    這篇文章主要給大家介紹了關(guān)于JavaScript判斷對象、數(shù)組是否包含某個屬性、某個值的相關(guān)資料,我們在實際的開發(fā)過程中,經(jīng)常需要判斷對象/數(shù)組是否包含某個屬性或者某個值,需要的朋友可以參考下
    2023-09-09
  • js分頁工具實例

    js分頁工具實例

    這篇文章主要介紹了js分頁工具及其具體用法,包括js與css的詳細實現(xiàn)代碼與使用方法,需要的朋友可以參考下
    2015-01-01
  • 設(shè)為首頁與加入收藏的JS代碼(多瀏覽器支持)

    設(shè)為首頁與加入收藏的JS代碼(多瀏覽器支持)

    由于現(xiàn)在很多瀏覽器版本,那么多瀏覽器兼容的設(shè)為首頁與加入收藏功能代碼,就比較好用,這里簡單的整理下,方便需要的朋友
    2012-12-12
  • 原生小程序封裝跑馬燈效果

    原生小程序封裝跑馬燈效果

    這篇文章主要為大家詳細介紹了原生小程序封裝跑馬燈效果,由多條銜接改動得到,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-10-10
  • 使用js實現(xiàn)的簡單拖拽效果

    使用js實現(xiàn)的簡單拖拽效果

    本文給大家分享的是使用純JS實現(xiàn)的簡單的拖拽效果的插件,算是對自己javascript學(xué)習(xí)的一個小的檢驗,如果小伙伴們需要復(fù)雜的拖拽效果,還是考慮jQuery的draggable吧,更成熟一些。
    2015-03-03
  • javascript event在FF和IE的兼容傳參心得(絕對好用)

    javascript event在FF和IE的兼容傳參心得(絕對好用)

    event在IE和FF不兼,下面為大家分享的是javascript event在FF和IE的兼容傳參心得,需要的朋友可以參考下
    2014-07-07

最新評論