A標籤觸發onclick事件而不跳轉

在web頁面開發時,我們經常會遇到下列情況:

1.一個標籤僅僅是要觸發onclick行爲;

2.表現上要有鼠標的pointer指針顯示,或者其他類似a標籤的視覺效果。

比如執行刪除操作時,爲了避免誤操作,我們要彈出對話框讓用戶確定是否刪除。因此我們經常會用鏈接<a></a>形式代替<button> 觸發onclick事件。

代碼如下:

<script type="text/javascript">
      function del(){
           if(confirm("確定刪除該記錄?")){
               parent.window.location="執行刪除.jsp";
              return true;
           }
       return false;
        }
</script>

<a href=""  target="mainFrame" class="STYLE4" οnclick="del()" >刪除</a>

這樣做的後果是js代碼會跳轉到"執行刪除.jsp"頁面,而<a>標籤也會跳轉打開一個空頁面。因爲html本身對 <a>標籤的href屬性做了處理,所以就會先執行我們自己定義的方法,接着再運行它自身的方法(跳轉的方法)。

解決方法主要有四種,如下:

1. 不用a標籤,設定css或用js來表現(有點複雜);

2. 用a標籤,onclick屬性或onclick事件中返回false;(個人喜歡)

    如:<a href=""  target="mainFrame" class="STYLE4" οnclick="del();return false" >刪除</a>

    這是個執行順序的問題,<a>這個標籤的執行順序應該是先執行onclick    的腳本,最後才進行href參數指定頁面的跳轉。在onclick中返回false,就可以中止<a>標籤的工作流程,也就是不讓頁面跳轉到href參數指定的頁面。

3. 用href="javascript:void(0)"這種僞協議;(這種僞協議,少寫的好)
    即:<a href="javascript:void(0)"  target="mainFrame" class="STYLE4" οnclick="del()" >刪除</a>

4. <a href="#"  class="STYLE4" οnclick="del()" >刪除</a>。(總是跳轉到當前頁面頂部,當頁面內容較多時,還是會有跳轉的感覺)

發佈了47 篇原創文章 · 獲贊 10 · 訪問量 37萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章