锋利的jQuery-4--阻止事件冒泡和阻止默认行为

阻止事件冒泡:

如果嵌套元素分别有自己的click事件,当点击内层元素时外层元素的事件也会被触发。

$("span").bind("click", function(event){
  //代码
  event.stopPropagation();    //通过bind创建的事件对象event来执行
} );

阻止默认行为:

网页中的默认行为,例如链接跳转和form提交,可以通过preventDefault()方法来阻止。

$("#submit").bind("click", function(event){
    var username = $("#username").val();
    if(username == ""){
        event.preventDefault();    //阻止表单的默认提交行为
    }
});

注意:如果想同时对事件对象停止冒泡和默认行为,可以在事件处理中返回false;这是在事件对象上同时调用stopPrapagation()和preventDefault()事件的简写。在上边的两个例子中,也可以把对应的方法改为return false;

时间: 2025-01-14 16:53:54

锋利的jQuery-4--阻止事件冒泡和阻止默认行为的相关文章

jQuery 中的事件冒泡和阻止默认行为

1.事件冒泡: 当点击内部 <span> 元素时,会触发自身及外层 <div> 和 <body> 的点击事件,这就是事件冒泡引起的.事件会随着 DOM 的层次结构依次向上传播. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(

jQuery[补1] - 事件冒泡和阻止冒泡

假设网页上有两个元素,其中一个元素嵌套在另一个元素中,并且都被绑定了 click 事件,同时 body 元素上也绑定了 click 事件. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="conten

##阻止事件冒泡和取消默认操作

取消事件冒泡 事件冒泡指当一个元素的事件被触发的时候,比如鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发,这个过程被称为事件冒泡.这个事件是从原始元素开始一直冒泡到DOM树的最上层.事件传播的3个阶段:捕获.冒泡.目标阶段. 阻止事件冒泡:w3c的方法是event.stopPropagation(),IE则是使用event.cancelBubble = true; 兼容性写法: var event = event || window.event; if(event &&

阻止事件冒泡和阻止后续代码执行

冒泡事件是点击子集标签的事件会触发父级标签的事件: 对应的jQuery代码如下: <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ // 为内层div绑定click事件 $("#msg").click(function(

js中阻止事件冒泡和浏览器默认行为

在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题.[兼容IE和FF] 1.阻止事件冒泡,使成为捕获型事件触发机制. function stopBubble(e) { //如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagat

阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别

今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, 2.event.preventDefault()方法 这是阻止默认事件的方法,调用此方法是,连接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素: 3.return false  : 这个方法比较暴力,他会同事阻止事件冒泡也会阻止默认事件:写上此代

阻止事件冒泡 和 阻止事件默认行为

1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, 2.event.preventDefault()方法 这是阻止默认事件的方法,调用此方法是,连接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素: 3.return false  : 这个方法比较暴力,他会同事阻止事件冒泡也会阻止默认事件:写上此代码,连接不会被打开,事件也不会传递到上一层的

js阻止浏览器、元素的默认事件与js阻止事件冒泡、阻止事件流

嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧 1. event.preventDefault();  -- 阻止元素的默认事件.注:a元素的点击跳转的默认事件 , button,radio等表单元素的默认事件 , div 元素没有默认事件 例: 复制代码代码如下: <a href="http://www.baidu.com" target="_bl

阻止事件冒泡和阻止默认行为

// 阻止事件冒泡 function stopBubble(e){ if(e && e.stopPropagation){ e.stopPropagation(); }else{ window.event.cancelBubble = true } } // 阻止默认行为 function stopDefault(e){ if(e && e.preventDefault){ e.preventDefaule() }else{ window.event.returnValue

js阻止事件冒泡和标签默认行为

<a href="/Scripts/newfiber_js_lib/images/1.jpg" ><div onclick="historyImg(this, event)" class="txt_more">更多</div></a> function historyImg(dom,e) { stopBubble(e); stopDefault(e); } //阻止事件冒泡函数 function s