javascript -- 阻止默认事件 阻止事件冒泡示

1. event.preventDefault();  -- 阻止元素的默认事件。
注:a元素的点击跳转的默认事件 ,

button,radio等表单元素的默认事件 ,

div 元素没有默认事件

例:

<a href="http://www.baidu.com" target="_black">百度</a>
var samp = document.getElementByTagName("a");
samp.addEventListener("click",function(e){e.preventDefault()},false);

解释:点击链接的时候正常情况下会发生跳转,但是现在我们阻止了它的默认事件,即跳转事件,这时就不会跳转到百度了。

2. event.stopPropagation();  -- 阻止元素冒泡事件

注:嵌套元素一般都存在冒泡事件,会带来某些影响

例:

<div id="c1" onclick="alert(1)">
  <div id="c2" onlick="alert(2)">
    <input type="button" id="c3" value="点击" onclick="alert(3)">
  </div>
</div>

这里点击button的时候,浏览器会先后弹出3,2,1,本来只想让绑定在button上的事件发生,却无意中触发了它的两个父级上的事件,这里我们只是做了一个简单测试,试想如果在项目开发中,某个按钮和他的父级同时绑定了很重要的事件,那么结果会惨不忍睹。这时的处理方法就是阻止冒泡事件。

给input注册click事件,同时阻止它的冒泡事件

document.getElementById(‘c3‘).addEventListener(‘click‘,function(e){e.stopPropagation()},false);
时间: 2024-10-03 05:16:12

javascript -- 阻止默认事件 阻止事件冒泡示的相关文章

阻止默认行为 阻止冒泡

什么是默认行为? var a = document.getElementById('a'); a.addEventListener('click',function(e){ e.preventDefault(); },false); 兼容性问题: function preventDefault(event){ var event = $$.getEvent(event); if(event.preventDefault){ event.preventDefault(); }else{ event

你根本不懂Javascript(5): HTML事件捕获与冒泡

本文最初发布于http://szhshp.org转载请注明 事件捕捉与冒泡 先捕获的必然是父节点, 然后一层层向下捕获, 然后一层层向上冒泡 这里是一个td被点击的效果图 通过三个阶段: 捕捉阶段: 从父节点, 逐渐向目标节点冒泡, 即自上向下 接近目标elem阶段(这一阶段会同时激活第一阶段和第三阶段的handler) 冒泡阶段: 从子节点向父节点冒泡 事件绑定机制 onXXX(event) addEventListener(event, handler) jQuery的elem.on(eve

事件流 事件冒泡和事件捕获

事件冒泡和事件捕获 他们是描述事件触发时序问题的术语. DOM标准规定事件流包括三个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段.捕获型事件流:事件的传播是从最不特定的事件目标到最特定的事件目标.即从外部到内部. 冒泡型事件流:事件的传播是从最特定的事件目标到最不特定的事件目标.即从内部到外部 事件冒泡 <body> <div class="parent"> <div class="son"> <div class=&qu

JS DOM基础 事件概述 事件流 事件处理方法 添加监听器 事件类型 事件对象 事件委托

一.事件概述 事件是什么? 在我们的生活中,都会接触到事件这样一个概念,它通常通过描述发生这件事的时间.地点.人物,发生了什么来进行概括. 同样的在javascript也有这样的一个的东西------事件. 页面上发生的事件:鼠标移动.点击.滚动等等. 事件描述了页面上发生的事情,通常它有以下三个要素组成: 事件源:触发事件的元素 事件类型:事件的触发方式(例如鼠标点击或键盘点击) 事件处理程序(事件监听器):事件触发后要执行的代码(函数形式) Javascript 使我们可以动态的去操作一个页

javascript事件之: 事件冒泡, 事件捕获 ,阻止默认事件

谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. 冒泡篇: 先来看一段实例: js: var $input = document.getElementsByTagName("input")[0]; var $div = document.getElementsByTagName("div")[0]; var $body = document.getElementsByTagName("

javascript, jQuery阻止默认事件和冒泡事件

事件冒泡(event bubbling) 事件冒泡是指一个元素上的事件被触发,然后这个事件按嵌套顺序在父级元素上触发,直至document根节点. 例如: <!DOCTYPE html> <html> <head> <title>Event Bubbling Example</title> </head> <body> <div id="myDiv">Click Me</div>

js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)

在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到"停止事件冒泡"和"阻止浏览器默认行为". 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( e && e.stopPropagation )//因此它支持W3C的stopPropagation()方法e.stopPropagation(); else//否则,我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubb

阻止事件冒泡,阻止默认事件

阻止事件冒泡 html代码: <table>  <tr>    <td><span>冒泡事件测试</span></td>  </tr></table> js代码: $('table').click(function(){    alert('table');});$('td').click(function(){    alert('td');});$('span').click(function(e){   

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

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

冒泡事件 阻止默认行为

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ