取消html中onclick的事件冒泡

阿新 • • 發佈：2018-12-25

value event stop 參數 top javascrip pro round sed

阻止html中onclick事件冒泡，處理方法上多加事件一個參數，不需要傳值。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
   
</head>
<body>
    <div style=‘background:red;width:200px;height:50px‘  
onclick=‘a()‘>
        <input type=‘button‘ value=‘ok‘ onclick=‘b()‘></input>
    </div>
   <script type="text/javascript">
     function a(e){
        alert("this div")
     }
      function b(e){
        alert("this button")
        if(e&&e.stopPropagation){
            e.stopPropagation();
        } 
else{
        window.event.cancelBubble =true;
        }
     }
    </script>
</body>
</html>

View Code

結果：阻止，button按鈕上的click事件冒泡

取消html中onclick的事件冒泡

value event stop 參數 top javascrip pro round sed 阻止html中onclick事件冒泡，處理方法上多加事件一個參數，不需要傳值。 <!DOCTYPE html> <html> <head&

對於html中的事件冒泡的問題

今天在修改後臺的一個模組，中發現一個button在點選時，觸發了表單提交，我在onclick中加入了return，這個在提交之前就應該返回了，不該出現這個問題。轉念一想，我覺得我應該時事件冒泡了，也就是一個子元素的事件觸發了父元素的事件的觸發。簡單

JQuery中阻止事件冒泡方式及其區別

use urn query class span 事件冒泡事件 clas nbsp 方式一：event.stopPropagation(); 1 $("#div1").mousedown(function(event){ 2 event.stopPropa

capture JS中的事件冒泡（Bubble）和事件捕獲（capture）以及如何阻止事件的冒泡

JS中的事件冒泡（Bubble）和事件捕獲（capture）以及如何阻止事件的冒泡對“捕獲”和“冒泡”這兩個概念，通常我們對冒泡瞭解和使用的會更多一些，因為在我們使用的所有瀏覽器中，都支援事件冒泡，即事件由子元素向祖先元素傳播的，就像氣泡從水底向水面上浮一樣。而在像firefox,chrome,safa

JS中的事件冒泡

js中的事件冒泡指的是：多個元素巢狀的時候，它們就會有層次關係，當這些元素註冊了相同的事件時，如果其中一層的元素觸發了這個事件，可能導致其它層的元素也觸發這個事件，這樣一來就會造成混亂。這個情況就是事件冒泡。為了避免這種混亂的發生，我們要想辦法阻止事件冒泡的發生。看一個事件冒泡的例子：

react中onClick事件傳參

初心-楊瑞超個人部落格誠邀您加入qq群(IT-程式猿-技術交流群)：757345416 在我們實際開發中，單擊事件傳參也是經常用到的，下面我們來研究下傳參問題。正常繫結事件： <button className="clear-completed" onCli

有關jsp中onclick事件無效的原因，以及jsp中頁面載入順序的問題

今天在寫jsp頁面時遇到一個有關onclick事件無效的問題，在這裡分享一下： <body> <div> <input type="text" id="name"/> </div> <div id="hin

微信小程式中的事件冒泡問題

冒泡事件：當一個元件上的事件被觸發後，該事件會向父節點傳遞。小程式中事件繫結對事件冒泡問題的處理： bindtap 事件繫結不會阻止冒泡事件向上冒泡 catchtap 事件繫結可以阻止冒泡事件向上冒泡 wxml: js: 父元素：touch:function(){ con

jQuery中阻止事件冒泡的方式及區別

方法一：event.stopPropagation(); $("#div").mousedown(function(event){ event.stopPropagation(); }); 方法二：return false; $("#di

JS中的事件冒泡和事件捕獲

談起JavaScript的事件，事件冒泡、事件捕獲、阻止預設事件這三個話題，無論是面試還是在平時的工作中，都很難避免。事件捕獲階段：事件從最上一級標籤開始往下查詢，直到捕獲到事件目標(target

form表單中onclick事件和onsubmit事件的執行順序

說來很慚愧，今天因為form表單的一個小問題困擾了一下午。雖然最終得以解決，但花費的時間實在是令人汗顏，現在總結一下遇到的問題。先說一下背景，之前幫一個朋友的專案寫了一個原生js的表單驗證，今天

js中onclick事件用“return”開頭+方法名的返回值

js中onclick事件用“return”開頭+方法名，方法內的返回值如果在任何一個事件上新增js方法上的時候要加上return; 在方法裡面要加上返回值。return true:事件本身的功能接著往上執行 return false:事件本身的功能不執行。比如：在a標籤內使

JavaScript中的事件冒泡與捕獲

事件冒泡和事件捕獲分別由微軟和網景公司提出，這兩個概念都是為了解決頁面中事件流（事件發生順序）的問題。考慮下面這段程式碼 <div id="outer"> <p id="inner">Click me!</p>

js 拼接HTML字串 onclick事件傳多個引數問題

歡迎來到Altaba的部落格 2017年10月27日問題：煩躁工作讓技術部落格停了好久才更新，實在對不住大家和自己了，今天重新撿起來直接上原始碼 <!DOCTYPE html> <html lang="en"> <head>

jQuery中的事件冒泡、事件捕獲和事件追加引發的問題

近日在專案中遇到一些問題，一個是ID值唯一存在的問題，另一個便是事件的追加產生的錯誤。關於ID值唯一存在，從id的定義來看，id代表唯一的元素，若頁面中出現多個標籤存在相同的id，那麼此時只有第一個id所在的標籤起作用，而且會多次起作用。所以若需要多個相同的

微信小程式中阻止事件冒泡

使用場景如上圖，這是一個活動的列表頁面，當用戶點選整個列表時，跳轉到活動詳情頁面，當用戶點選“去報名”按鈕時，跳轉到報名頁面。但是當我們用"bindtap"事件繫結，點選“去報名”按鈕後，會先跳轉到報名頁面，再跳轉到活動詳情頁面。問題分析出現這個問題的原因

HTML如何阻止事件冒泡

（1）什麼是事件起泡首先你要明白一點，當一個事件發生的時候，該事件總是有一個事件源，即引發這個事件的物件，一個事件不能憑空產生，這就是事件的發生。當事件發生後，這個事件就要開始傳播。為什麼要傳播呢？因為事件源本身並沒有處理事件的能力。例如我們點選一個按鈕時，就會產生一個c

React 中阻止事件冒泡的問題

react 監聽 lse children blog 開始代理 tco per 在正式開始前，先來看看 JS 中事件的觸發與事件處理器的執行。 JS 中事件的監聽與處理事件捕獲與冒泡 DOM 事件會先後經歷捕獲與冒泡兩個階段。捕獲即

取消html 移動端 onclick點選事件高亮效果

-webkit-tap-highlight-color:rgba(0,0,0,0) //webkit是蘋果瀏覽器引擎，tap點選，highlight背景高亮，color顏色，顏色用數值調節。原因如

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

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

取消html中onclick的事件冒泡

相關推薦