js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件_基础知识

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);

OK!!!了

 PS:这里再为大家推荐一款关于JS事件的在线查询工具,归纳总结了JS常用的事件类型与函数功能:

javascript事件与功能说明大全:

http://tools.jb51.net/table/javascript_event

时间: 2024-09-08 04:28:17

js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件_基础知识的相关文章

JS不用正则验证输入的字符串是否为空(包含空格)的实现代码_基础知识

在项目中需要验证输入的字符串是否为空,包括空格,不太喜欢使用正则,所以就想到了js的indexOf函数,indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置,如果要检索的字符串值没有出现,则该方法返回 -1. 语法:stringObject.indexOf(searchvalue,fromindex),searchvalue必需,fromindex:可选参数,在字符串中开始检索的位置.它的合法取值是 0 到 stringObject.length - 1.如省略该参数,则将从

js之WEB开发调试利器:Firebug 下载_基础知识

在米随随的Blog看到有关Firebug的介绍,遂下载试用了一下,确实是比较好的工具. 一.效果开发调试利器:Firebug 下载_基础知识-电工基础知识视频下载"> 二.主要功能 Inspect and edit HTML Tweak CSS to perfection Visualize CSS metrics Monitor network activity Debug and profile JavaScript Quickly find errors Explore the DO

JS 事件绑定、事件监听、事件委托详细介绍_基础知识

在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代理)等.这些名词是什么意思呢,有什么作用呢? 事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数. 在DOM中直接绑定事件

JavaScript阻止事件冒泡示例分享_javascript技巧

之前遇到事件冒泡的问题,也去网上搜索了一番,结果大部分都是一样的代码,贴来用时也不太顺利.涉及到FF时,可以用 e.stopPropagation(); ,不知怎地我没用成功.不过我发现FF支持e.cancelBubble = true;的写法,经测试可行.就把代码贴在这里吧,省得以后到处找.IE以前版本的兼容性还没测试,用到时再完善吧.   复制代码 代码如下: //取消事件冒泡 function stopBubble(e) {     var evt = (e) ? e : window.e

js闭包引起的事件注册问题介绍_基础知识

背景:闲暇时间看了几篇关于js作用域链与闭包的文章,偶然又看到了之前遇到的一个问题,就是在for循环中为dom节点注册事件驱动,具体见下面代码: <!DOCTYPE html> <html> <head> <title>js闭包</title> <meta charset="utf-8" /> </head> <body> <button id="anchor1"&

怎么通过onclick事件获取js函数返回值(代码少)_基础知识

具体过程不做详细叙述,直接上代码: 写一个弹出框,绑定onclick事件是好像控制不了它的返回值.代码如下 function createBtn(){ for(var i = 0; i < _this.btn.length; i++){ var btn = document.createElement('span'); btn.id = 'btn_' + i; btn.innerHTML = _this.btn[i]; btn.style.padding = '5px 15px'; btn.st

JavaScript 学习笔记(十六) js事件_基础知识

回顾 事件对象里包含三个方面的信息····回看上一篇内容! 事件对象里的属性和方法,主要是鼠标和键盘的信息. 1. 获取事件类型 事件对象属性type 2. 获取按键代码 事件对象属性keyCode:回车为13,空格为32,后退键为8 3. 检测Shift.Alt.Ctrl键 事件对象属性是否被按下:shiftKey.altKey.ctrlKey 4. 获取客户端坐标 事件对象属性clientX和clientY 5. 获取屏幕坐标 事件对象属性screenX和screenY 事件的类型 根据触发

js表单事件详细汇总_基础知识

javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown IE4.N4 按下鼠标时触发此事件 onmouseup IE4.N4 鼠标按下后松开鼠标时触发此事件 onmouseover IE3.N2 当鼠标移动到某对象范围的上方时触发此事件 onmousemove IE4.N4 鼠标移动时触发此事件 onmouseout IE4.N3 当鼠标离开某对象范围

javascript事件绑定学习要点_基础知识

事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现代事件绑定在传统绑定上提供了更强大更方便的功能. 一 传统事件绑定的问题 传统事件绑定中的内联模型不做讨论,基本很少去用.先来看一下脚本模型,脚本模型将一个函数赋值给一个事件处理函数.传统绑定如: window.onload=function(){ var box=document.getElementById('box'); box.onclick = function(){ alert('Le