1. 程式人生 > >jQuery中的 return false, e.preventDefault(), e.stopPropagation()的區別

jQuery中的 return false, e.preventDefault(), e.stopPropagation()的區別

e.stopPropagation()阻止事件冒泡

<head>
   <title></title>
   <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
</head>
<body>
   <table>
       <tr>
           <td><span>冒泡事件測試</span></td>
       </tr>
   </table>
</body>

我們先看這段程式碼:

   <script type="text/javascript">
       $(function () {
           $("table").click(function () { alert("table alert"); });
           $("td").click(function () { alert("td alert"); });
           $("span").click(function (){
                   alert("span alert");
           });
       });
   </script>

我們會看到這樣的情況:span alert -> td alert -> table alert。這就叫事件冒泡。就是從下到上,從裡到外,事件依次觸發。

有的時候我們不希望事件冒泡咋辦?

   <script type="text/javascript">
       $(function () {
           $("table").click(function () { alert("table alert"); });
           $("td").click(function () { alert("td alert"); });
           $("span").click(function (e){
                   alert("span alert");      
                   e.stopPropagation();
           });
       });
   </script>

如果想獲得事件相關資訊,就要給知識方法加一個e物件,e就是事件物件。

e.preventDefault()阻止事件預設行為。


$("a").click(function (e) {
    alert("預設行為被禁止嘍");
    e.preventDefault();
});

return false等效於同時呼叫e.preventDefault()和e.stopPropagation()

return false除了阻止預設行為之外,還會阻止事件冒泡。如果手上有一份jquery原始碼的話,可檢視其中有如下程式碼:

if (ret===false){
  event.preventDefault();
  event.stopPropagation();
}

相關推薦

jQueryreturn false e preventDefault e stopPropagation 的區

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

jQueryreturn false e preventDefault e stopPropagation 的區

                e.stopPropagation()阻止事件冒泡<head>    <title></title>    <script src="Scripts/jquery-1.4.1.js" type="text/javascript">

jQueryreturn false,e.preventDefault(),e.stopPropagation()的區別

e.stopPropagation()阻止事件冒泡 <head>     <title></title>     <script src="Scripts/jquery-1.4.1.js" type="text/javascript

jQuery js return false,e.preventDefault(),e.stopPropagation()的區別(事件冒泡)

== opp 事件 ava 事件對象 方法 mic 這樣的 font   有時候遇到冒泡事件很煩人,真的..... 1.e.stopPropagation()阻止事件冒泡 <head> <title></title>

jQueryreturn false, e.preventDefault(), e.stopPropagation()的區別

e.stopPropagation()阻止事件冒泡 <head>    <title></title>    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"&

關於jsreturn false、event.preventDefault()和event.stopPropagation()區別,以及阻止事件冒泡和阻止預設事件

在平時專案中,如果遇到需要阻止瀏覽器預設行為,大家經常會用return false;和event.preventDefault()來阻止,但對它倆的區別還是模糊,這裡順便帶上event.stopPropagation()一起區分下。 事件處理程式的返回值只對通過屬性註冊的處理程式才有意義,如果我

4.不要在ajaxreturn false不會生效的

//校驗產品服務費費率 function validateProductServiceFeeRate(id, serviceFeeRate) { var message = true; $.ajax({ url: "/product/validateProductse

jqueryprop()方法和attr()方法的區別淺析

clas ttr over dex idt pro query selected accesskey jquery1.6中新加了一個方法prop(),一直沒用過它,官方解釋只有一句話:獲取在匹配的元素集中的第一個元素的屬性值。 大家都知道有的瀏覽器只要寫disabled,c

jqueryprop()方法和attr()方法的區別

nbsp editable isa dex rop 效應 元素 body att jquery1.6中新加了一個方法prop(),一直沒用過它,官方解釋只有一句話:獲取在匹配的元素集中的第一個元素的屬性值。 大家都知道有的瀏覽器只要寫disabled,checked就可以了

關於jqueryhtml()、text()、val()的區別

innertext 函數 () ron 表單元素 tro ext 回調函數 多個 .html()用為讀取和修改元素的HTML標簽 對應js中的innerHTML .html()是用來讀取元素的HTML內容(包括其Html標簽),.html()方法使用在多個元素上時,

jquery$.ajax $.get $.post 和$.getJSON的區別和用法(轉載)

首先,.get和.get和.post其實都是.ajax的一種,在.ajax的一種,在.ajax中有一個type屬性,專門用來指定是get請求還是post請求的。如下:  $.ajax({  url:”路徑”,  type:”post/get”,  dataty

jQuery attr prop和data之間的區別

先聊一聊data和prop、attr的本質區別吧 dataduix對屬性的值不是直接修改而是知識修改了快取的資料 例如:         <input type="text" name="text1" id="txt1" placeholde

jQuery $.ajax $.get $.post 和$.getJSON 的 區別 和 用法

1、$.ajax 是 jQuery 底層 AJAX 實現,$.ajax是一種通用的底層封裝,$.ajax()請求資料之後,則需要使用回撥函式,有beforeSend、error、dataFilter、success、complete等。 2、$.get $.po

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

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

jQuery選擇器加尖括號的區別

$("img")為一個get的方法,是讀取標籤為"img"元素的屬性及設定相應的屬性;$("<img/>")為一個set的方法,是建立一個新的標籤元素"img"並賦予相應標籤相應的屬性舉例:$(document).ready(function(){findDogs

[轉載]jQuery的html,val,text區別

在jquery中   text() 返回目標元素所包含的所有文字內容,注意不包含html標籤 alert($("#shuru").text()); 1 html() 返回目標元素所包含的所有內容,其中也包含html

jquery四種事件監聽的區別

我們知道jquery提供了四種事件監聽方式,分別是bind、live、delegate、on,下面就分別對這四種事件監聽方式分析。 已知有4個列表元素:   列表元素1   列表元素2   列表元素

jQuerybind、live和delegate的區別

DOM樹 首先,視覺化一個HMTL文件的DOM樹是很有幫助的。一個簡單的HTML頁面看起來就像是這個樣子: 事件冒泡(又稱事件傳播) 當我們點選一個連結時,其觸發了連結元素的單擊事件,該事件則引發任何我們已繫結到該元素的單擊事件上的函

jquery選擇器children和find的區別

children()和find()的異同: 1> children及find方法都用是用來獲得element的子elements的,兩者都不會返回 text node,就像大多數的jQuery方法一樣。  2> children方法獲得的僅僅是元素一下級的子

jQuery四個綁定事件的區別 on,bind,live,delegate

function delegate 速度 html 操作 cli 目標 bind 事件 1.jQ操作DOM元素的綁定事件的四種方式 jQ中提供了四種事件監聽方式,bind、live、delegate、on,對應的解除監聽的函數分別是unbind,die,unde