A標簽onclick事件取消默認行為

阿新 • • 發佈：2017-12-01

www ogl ron 單擊 s函數 man blog 表示屬性

在開發中，經常會碰到為a標簽綁定單擊事件，由於a標簽默認有跳轉的行為，所以會影響到我們的onclick事件的處理代碼。

我們需要屏蔽掉他的默認行為，下面是一些常用的方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>方式1: href="javascript:void(0)"</h1>
<a href= 
"javascript:void(0)" onclick="alert(‘方式1, 執行一段代碼.‘)">情刑1: 執行一段代碼.</a> <br/>
<a href="javascript:void(0)" onclick="popup()">情刑2: 調用一個已聲明的js函數.</a> <br/>
<a href="javascript:void(0)" id="manual_bind_click_way1">情形3: 手動綁定click事件</a> <br/>

<h1>方式2: onclick="return false;"</h1> 

<a href="http://www.google.com" onclick="alert(‘方式2, 執行一段代碼.‘); return false;">情刑1: 執行一段代碼.</a> <br/>
<a href="http://www.google.com" onclick="popup(); return false;">情刑2: 調用一個已聲明的js函數.</a> <br/>
<a href="http://www.google.com" id="manual_bind_click_way2">情刑3: 手動綁定click事件</a> 

<script>

    // 已聲明函數popup
    function popup() {
        alert("彈窗測試.");
    }
    
      // 手動綁定click
    window.onload = function () {
        var aEle_way1 = document.getElementById("manual_bind_click_way1"); // 方式1 a標簽.
        aEle_way1.onclick = function () {
            alert("手動綁定click事件.");
        }

        var aEle_way2 = document.getElementById("manual_bind_click_way2"); // 方式2 a標簽.
        aEle_way2.onclick = function () {
            alert("手動綁定click事件.");
            return false;
        }
    }
</script>
</body>
</html>

在實現上大概有兩種方式：

方式1: 為href屬性添加javascript:void(0)來構造偽鏈接, 即為：href="javascript:void(0)"
方式2: 添加onclick屬性並在事件處理代碼中通過return false;來屏蔽默認行為, 即為：onclick="return false;"(這種方式表示希望保留href屬性的內容.)

這兩種方式都會直接的屏蔽跳轉行為.

我們在開發中可能會遇到如下3種情況, 比如說

單擊a標簽後, 執行一段js代碼. (如情形1)
單擊a標簽後, 調用js中已經聲明的函數. (如情形2, 這種情況大家一般傳遞this對象, 即: onclick="popup(this)")
我們想要手動為a標簽綁定單擊事件, 但是在事件執行後依然不希望a標簽跳轉. (如情形3)

需要說明的是如果以方式2的來實現情形3, 那麽需要onclick事件處理最後返回false, 即return false, 否則執行完click事件後依然會跳轉.

A標簽onclick事件取消默認行為

www ogl ron 單擊 s函數 man blog 表示屬性在開發中，經常會碰到為a標簽綁定單擊事件，由於a標簽默認有跳轉的行為，所以會影響到我們的onclick事件的處理代碼。我們需要屏蔽掉他的默認行為，下面是一些常用的方式。 <!DOCTYPE html

JavaScript基礎 a標記使用onclick事件阻止默認跳轉 onclick事件與跳轉 ,onclick事件優先執行。

傳智技術部推薦 turn utf 傳智播客 ctype div type 鎮場詩：　　　　清心感悟智慧語，不著世間名與利。學水處下納百川，舍盡貢高我慢意。　　　　學有小成返哺根，願鑄一良心博客。誠心於此寫經驗，願見文者得啟發。—————————————————————

【JavaScript】a標簽onclick傳遞參數不對，A標簽調用js函數寫法總結

狀態欄 ring pos val tracking 使用直接修改 track 錯誤示例： <a href="javascript:waterLineEdit(${goods.goods_id})" >修改 </a> <!-- 瀏覽器

JavaScript--取消a標簽和form的submit提交默認行為

tel put 表單元素 link nbsp script 失敗 orm cli 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset=

解決MUI阻止a標簽默認跳轉事件—方法總結

點擊獲取 vip 好用 style document www. pca 直接　　用過mui的小夥伴們一定不會陌生，有時候真的很煩mui本身會阻止a標簽默認跳轉。一般只要用了mui的ui組件，比如頭部，底部或者彈框，你就不能在用a標簽進行跳轉了。　　註：項目中引用了mu

教你小三角，適用移動端等，解決移動端a標簽的默認樣式

utf-8 劃線 hover -s html 出現 class span charset 1.小三角，通過給一個div設置足夠大的邊框，讓它的上邊框，右邊框，左邊框，的背景顏色設置成透明的，來實現，如下： <!DOCTYPE html> <html>

a標簽默認顏色

pre code clas col blog spa test color 默認 <span style="color:#0070b8">test</span> #0070b8可以達到仿a標簽默認顏色的效果a標簽默認顏色

點擊a標簽的子元素不跳轉，阻止默認行為

行為 es2017 alt 默認技術 mage 跳轉 cnblogs ges 點擊a標簽的子元素不跳轉，阻止默認行為

js 重寫a標簽的href屬性和onclick事件

document 點擊但是 () move ttr 單擊事件 can remove 適應場景：假如移動端撥打電話，需要給a標簽添加href屬性，但是由於需求，需要鏈接跳轉的同時給a標簽添加onclick事件，如果不做任何處理的話，默認執行點擊事件，而不會跳轉href屬性的

JavaScript阻止冒泡和取消事件默認行為

阻止冒泡 ble opp prop bubble script als spa rop //功能:停止事件冒泡 function stopBubble(e) { if ( e && e.stopPropagation ) {

取消a標簽的跳轉行為

a 取消跳轉的行為第一種方法:<a href="javascript:;">我們不一樣</a>第二種方法:取消a標簽的跳轉行為

a標簽的href與click事件

void 跳轉 javascrip 返回置頂 onclick str script 可能 <a href=‘index.html‘ onclick=‘index()‘ >鏈接</a> a標簽中如果同時存在href和onclick時，以上的寫法，on

a標簽自執行點擊事件

() style AC AD 點擊事件 click 原生 pac 標簽 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Monaco; color: #a5b2b9 } p.p2 { margin: 0.0px 0.

html A標簽綁定點擊事件。跳轉頁面。處理

rip 取消 AS htm 默認點擊事件後綁定 HR bubuko 在平時的頁面中，肯定有需要點擊A標簽進行處理。這時候習慣性的綁定一個點擊事件進行數據處理。在A標簽中 herf="#" 然後綁定一個點擊事件。或者在A標簽裏面的元素裏面有一個點擊事件。

取消默認事件及冒泡

冒泡 UNC turn elb 我們 efault default 事件對象默認阻止冒泡事件 var el = window.document.getElementById("a"); el.onclick = function (e) { //如果提供了事件

jquery觸發a標簽的點擊事件不起作用

而不是 nbsp 原來 func tel 但是 class 想要子元素最近項目中使用click觸發a標簽的點擊事件$(‘a‘).click()觸發不了。原來$(‘a‘).click()並不能觸發a標簽中內容的點擊事件，只相當於觸發了a本身的onclick，而不是像用戶

a標簽可能會出現的bug

ref 當前頁屬性定位問題實現 use 位置你會 nload 在項目中a標簽遇到過的問題發現問題：a標簽包裝的按鈕，如果這個按鈕在頁面滾動後出現，你點擊後，頁面會定位到滾動以前的位置，但是我並不想要這種效果。分析問題並嘗試：　一開始以為是光標定位問題，用doc

一個關於A標簽和分頁的怪問題！

boot 題解 input page mvc def data tel 問題解決用bootstrap做了用戶電話號碼查詢的前端頁面。並且用了MVCPager分頁。 Bootstrap前端頁如下：一開始使用了用A標簽，分頁成功後，我進入第二頁，點擊這個A標簽，頁面會自動

a標簽鏈接添加顏色

mar ont deb lan 寫上 over back ext 頁面定義鏈接樣式　　CSS為一些特殊效果準備了特定的工具，我們稱之為“偽類”。　　　　　其中有幾項是我們經常用到的，下面我們就詳細介紹一下經常用於定義鏈接樣式的四個偽類，　　　　它們分別是：

使用mui框架後a標簽無法跳轉

無法刪除節點將不不能 tel tno 刪除 inner bsp 由於最近工作項目上使用到前臺mui框架，筆者在將H5轉換為jsp時，遇見各種各樣問題，原因歸結為對mui框架不熟悉，今天就遇見一個特別奇怪的問題，界面中超鏈接<a>標簽無法跳轉，筆者試著添加點

A標簽onclick事件取消默認行為

相關推薦