a標籤裡面巢狀一個a標籤,點選子連結標籤時,同時觸發了父標籤a

Mr-Wanter發表於2016-06-30

情景還原:

html生成的原始碼:

<a href="main.aspx?type=navTwo&stuNo=19&navName=電子資源" style="font-size: 16px;">電子資源
   <b style="background: url(http://localhost:58596/images/LS/right.png);"></b>
   <div class="c1-child" style="display: block; left: 124px; color: rgb(0, 0, 0);">
    <span onclick="redict('41','電子資源')" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255);">資料庫</span>
    <span onclick="redict('40','電子資源')" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255);">試用資料庫</span>
    <span onclick="redict('39','電子資源')">自建特色資料庫</span>
   </div>
</a>

span點選觸發事件:

      function redict(id, name) {
            
                //接下來使用js程式碼進行頁面跳轉
                window.location.href = "main.aspx?type=nav&stuNo=" + id + "&navName=" + name;
        }

當點選span內的標籤時會觸發a標籤的href  導致跳轉連結不正確


解決辦法:

js新增event.preventDefault();

阻止預設事件.比如當你點選帶有href值的a標籤時,元素響應click事件後,還會發生頁面跳轉.如果加上這個方法(屬性)後,瀏覽器只會響應click事件,不會發生跳轉.

更改js:

      function redict(id, name) {
                event.preventDefault();
                //接下來使用js程式碼進行頁面跳轉
                window.location.href = "main.aspx?type=nav&stuNo=" + id + "&navName=" + name;
        }    

相關文章