A標簽觸發onclick事件而不跳轉的多種解決方法

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

一個標簽僅僅是要觸發onclick行為
表現上要有鼠標的pointer指針顯示或者其他類似a標簽的視覺效果
比如執行刪除操作時為了避免誤操作我們要彈出對話框讓用戶確定是否刪除因此我們經常會用鏈接<a></a>形式代替<button> 觸發onclick事件
代碼如下

復制代碼 代碼如下:
<script type="text/javascript">
function del(){
if(confirm("確定刪除該記錄？")){
parentwindowlocation="執行刪除jsp";
return true;
}
return false;
}
</script>
<a href="" target="mainFrame" class="STYLE" onclick="del()" >刪除</a>

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

解決方法主要有四種如下
不用a標簽設定css或用js來表現（有點復雜）
用a標簽onclick屬性或onclick事件中返回false(個人喜歡)
如<a href="" target="mainFrame" class="STYLE" onclick="del();return false" >刪除</a>
這是個執行順序的問題<a>這個標簽的執行順序應該是先執行onclick 的腳本最後才進行href參數指定頁面的跳轉在onclick中返回false就可以中止<a>標簽的工作流程也就是不讓頁面跳轉到href參數指定的頁面
用href="javascript:void()"這種偽協議（這種偽協議少寫的好）
即<a href="javascript:void()" target="mainFrame" class="STYLE" onclick="del()" >刪除</a>
<a href="#" class="STYLE" onclick="del()" >刪除</a>（總是跳轉到當前頁面頂部當頁面內容較多時還是會有跳轉的感覺）

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20351.html