很多时候，我们做前端的时候都会有这样的小功能，点击弹出某个框框，但是，有时候不想操作，就想点击某个空白处，隐藏该框框。假设如下场景，一个小按钮，点击可以弹出一个模态框。 就这么简单，但是我们想要点击空白部分的时候隐藏模态框，加入按钮id：btn，模态框id：model 也许我们最简单的思路就是直接在document上监听一个事件，伪代码如下： 按钮点击弹出事件监听： 代码如下: $("#btn").bind("click",function(e){ if(e.st...
1. event.preventDefault(); -- 阻止元素的默认事件。注：a元素的点击跳转的默认事件 ， button，radio等表单元素的默认事件 ， div 元素没有默认事件 例： 代码如下:百度代码如下:var samp = document.getElementByTagName("a");samp.addEventListener("click",function(e){e.preventDefault()},false); 解释：点击链接的时候正常情况下会发生跳转，但是现在我们阻止了它的默认事件，即跳转事件，这时就不会跳转到百度了。 2. ev...
Js冒泡机制是指如果某元素定义了事件A，如click事件，如果触发了事件之后，没有阻止冒泡事件，那么事件将向父级元素传播，触发父类的click函数。 如下例所示： 代码如下: function ialertdouble(e) { alert('innerdouble'); stopBubble(e); } function ialertthree(e) { alert('innerthree'); stopBubbleDouble(e); } function stopBubble(e) { var evt = e||window.event; evt.stopPropagation?evt.stopPropagation():(evt.ca...
一、冒泡事件简介 当我们点击一个控件的时候，如果包括这个控件的父控件也有click事件，则会继续执行。比如：div下的a都有click事件，点击a的时候，会alert出现2次。这个现象叫做冒泡事件。 这个事件从原始元素开始一直冒泡到DOM树的最上层。目标元素: 任何一个事件的目标元素都是最开始的那个元素，在我们的这个例子中也就是按钮，并且它在我们的元素对象中以属性的形式出现。使用事件代理的话我们可以把事 件处理器添加到一个元素...
一、事件的发生顺序 这个问题的起源非常简单，假设你在一个元素中又嵌套了另一个元素 代码如下:-----------------------------------| element1 || ------------------------- || |element2 | || ------------------------- |-----------------------------------：并且两者都有一个onClick事件处理函数(event handler)。如果用户单击元素2，则元素1和元素2的单击事件都会...
之前查手册的时候没有看到有事件对象这一概念，当时我想实现的是点击一个文本框出现一个下拉多选框，在文本框失去焦点是触发blur事件，从而使下拉框隐藏起来。但是当我要选择多选框是也会使它隐藏，就不能进行选择了，这让我很郁闷。查了一天的资料，终于在脱离了焦点这一块。在网上发现有一个事件冒泡的东西，发现通过点击可以实现我的这一功能。 e.stopPropagation()阻止事件冒泡 代码如下: 冒泡事件测试 我们先看这...
javascript, jquery的事件中都存在事件冒泡和事件捕获的问题，下面将两种问题及其解决方案做详细总结。 事件冒泡是一个从子节点向祖先节点冒泡的过程； 事件捕获刚好相反，是从祖先节点到子节点的过程。 给一个jquery点击事件的例子： 代码如下： 代码如下: test $(function(){ $('#clickMe').click(function(){ alert('hello'); }); $('body').click(function(){ alert('baby'); }); }); click me click 事件冒泡现...
什么是JS事件冒泡？ 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 如何来阻止Jquery事件冒泡？通过一个小例子来解释Porschev-...
简单说下事件委托与阻止冒泡 html:全部 纽约 洛杉矶 拉斯维加斯 夏威夷 旧金山 奥兰多 西雅图 js:$("ul[data-type='cityPick']").on('click',function(){ alert("父元素ul被点击"); }); $("ul[data-type='cityPick']").on('click','li',function(){ alert("子元素li被点击"); });当点击具体的li元素时，发现ul的事件也被触发了，这是我们不想看到的。 解决：$("ul[data-type='cityPick']").on('click',function(){ al...
在javascript的dom操作做肯定会遇到js的冒泡事件，最常见的是div弹窗事件如图解当点击灰色部分是弹窗消失，点击黑色部分时没有效果。 通过下面一段代码来分析js的冒泡事件 html代码：代码如下:js冒泡事件js冒泡事件分析Click me !var box=document.querySelector(".box"),btn=document.querySelector(".btn");box.onclick=function(event){alert("我是div");}btn.onclick=function(event){alert("我是button");}使用firefox浏览器的...
之前遇到事件冒泡的问题，也去网上搜索了一番，结果大部分都是一样的代码，贴来用时也不太顺利。涉及到FF时，可以用 e.stopPropagation(); ，不知怎地我没用成功。不过我发现FF支持e.cancelBubble = true;的写法，经测试可行。就把代码贴在这里吧，省得以后到处找。IE以前版本的兼容性还没测试，用到时再完善吧。代码如下: //取消事件冒泡 function stopBubble(e) {var evt = (e) ? e : window.event;//兼容FFevt.cancelBubble = t...
本文实例讲述了js中的事件捕捉模型与冒泡模型。分享给大家供大家参考。 具体实现方法如下： 实例1：代码如下:window.onload = function(){document.getElementById('par').addEventListener('click',function() {alert('par');},true);document.getElementById('son').addEventListener('click',function() {alert('son');},true);}#par{width:300px;height:200px;background:gray;} #son{width:200px;height:100px;background:gre...
本文实例讲述了zepto.js中tap事件阻止冒泡的实现方法。分享给大家供大家参考。具体如下： 最近在弄一个手机版的网站，本来想用jQuery Mobile，但文件太大了，所以用了zepto.js 由于移动网页中使用click事件会有延迟，所以就用上了zepto.js中的tap事件。 使用click事件可以使用stopPropagation来阻止冒泡，但tap使用该方法无效 现在我需要实现这样一个效果：点击a.btn这个按钮，然后显示div.panel，当我点击非div.panel时隐藏div.pa...
冒泡事件就是点击子节点，事件会向上传递，最后触发父节点，祖先节点的点击事件。 html代码部分：代码如下: 外层div元素内层span元素外层div元素jQuery代码如下：代码如下:$(function(){$('span').bind("click",function(){var txt = $('#msg').html() + "内层span元素被点";$('#msg').html(txt);});$('#content').bind("click",function(){var txt = $('#msg').html() + "外层div元素被点击";$('#msg').html(txt);});$("body").bi...
本文实例讲述了javascript事件冒泡。分享给大家供大家参考。具体分析如下： 事件冒泡：如果元素A嵌套在元素B中，那么A被点击不仅A的onclick事件会被触发,B的onclick也会被触发， 触发的顺序是"由内而外".验证:在页面上添加一个table,table里有tr,tr里有td,td里放一个p, 在p,td,tr,table中添加事件响应事件冒泡希望本文所述对大家的javascript程序设计有所帮助。