javascript:阻止事件冒泡和阻止浏览器的默认行为_Jquery_ThinkSAAS
javascript:阻止事件冒泡和阻止浏览器的默认行为
javascript:阻止事件冒泡和阻止浏览器的默认行为
内容来源： 网络
&a onclick="toggleFriendFuncList(event, '6708062', 'he');"&&/a&
由于href是空值，如果不阻止浏览器的默认行为，产生的效果就是刷新页面。
现在我们需要做的就是阻止href的链接事件，而去执行onclick事件。
老的处理方式
&a onclick="toggleFriendFuncList(event, '6708062', 'he');"href="javascript:void(0);"&&/a&
js的写法：
1)停止冒泡的写法
//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.stopPropagation )
　　// 因此它支持W3C的stopPropagation()方法
　　e.stopPropagation();
　　//否则，我们需要使用IE的方式来取消事件冒泡
　　window.event.cancelBubble =
2）阻止浏览器的默认行为
//如果提供了事件对象，则这是一个非IE浏览器
if ( e&&e.preventDefault )
　　 //阻止默认浏览器动作(W3C)
　　e.preventDefault();
　　//IE中阻止函数器默认动作的方式
　　window.event.returnValue =
jquery的写法：
1）return false ：In event handler ,prevents default behavior and event bubbing 。
return false 在事件的处理中，可以阻止默认事件和冒泡事件。
2）event.preventDefault()：In event handler ,prevent default event (allows bubbling) 。
event.preventDefault()在事件的处理中，可以阻止默认事件但是允许冒泡事件的发生。
3）event.stopPropagation()：In event handler ,prevent bubbling (allows default behavior).
event.stopPropagation()在事件的处理中，可以阻止冒泡但是允许默认事件的发生
prototype的写法：
Event.stop(event)
用法介绍：
事件发生后，浏览器通常首先触发事件发生元素上的事件处理程序，然后是它的父元素，父元素的父元素……依此类推， 直到文档的根元素为止。这被称为 事件冒泡，是事件传播的最常见的方式。当处理好一个事件后， 你可能想要停止事件的传播，不希望它继续冒泡。
当你的程序有机会处理事件时，如果这个事件具有 默认行为，同时浏览器也会处理它。例如，点击导航链接、 将表单提交到服务器、在一个单行文本框中按下回车键等等。如果对这些事件你定义了自己的处理方式， 可能会非常希望阻止相关的默认行为。
PHP开发框架
开发工具/编程工具
服务器环境
ThinkSAAS商业授权：
ThinkSAAS为用户提供有偿个性定制开发服务
ThinkSAAS将为商业授权用户提供二次开发指导和技术支持
让ThinkSAAS更好，把建议拿来。
开发客服微信谈起JavaScript的 事件，事件冒泡、事件捕获、阻止默认事件这三个话题，无论是面试还是在平时的工作中，都很难避免。
先来看一段实例：
var $input = document.getElementsByTagName("input")[0];
var $div = document.getElementsByTagName("div")[0];
var $body = document.getElementsByTagName("body")[0];
$input.onclick = function(e){
this.style.border = "5px solid red"
var e = e || window.e;
alert("red")
$div.onclick = function(e){
this.style.border = "5px solid green"
alert("green")
$body.onclick = function(e){
this.style.border = "5px solid yellow"
alert("yellow")
&input type="button" value="测试事件冒泡" /&
依次弹出”red“,”green”,”yellow”。
你的本意是触发button这个元素，却连同父元素绑定的事件一同触发。这就是事件冒泡。
如果对input的事件绑定改为：
$input.onclick = function(e){
this.style.border = "5px solid red"
var e = e || window.e;
alert("red")
e.stopPropagation();
这个时候只会弹出”red“
因为阻止了事件冒泡。
既然有事件的冒泡，也可以有事件的捕获，这是一个相反的过程。区别是从顶层元素到目标元素或者从目标元素到顶层元素。
来看代码：
$input.addEventListener("click", function(){
this.style.border = "5px solid red";
alert("red")
$div.addEventListener("click", function(){
this.style.border = "5px solid green";
alert("green")
$body.addEventListener("click", function(){
this.style.border = "5px solid yellow";
alert("yellow")
这个时候依次弹出”yellow“,”green”,”red”。
这就是事件的捕获。
如果把addEventListener方法的第三个参数改成false，则表示只在冒泡的阶段触发，弹出的依次为：”red“,”green”,”yellow”。
阻止默认事件篇
有一些html元素默认的行为，比如说a标签，点击后有跳转动作；form表单中的submit类型的input有一个默认提交跳转事件；reset类型的input有重置表单行为。
如果你想阻止这些浏览器默认行为，JavaScript为你提供了方法。
var $a = document.getElementsByTagName("a")[0];
$a.onclick = function(e){
alert("跳转动作被我阻止了")
e.preventDefault();
////也可以
&a href=""&昵图网&/a&
默认事件没有了。
既然return false 和 e.preventDefault()都是一样的效果，那它们有区别吗？当然有。
仅仅是在HTML事件属性 和 DOM0级事件处理方法中 才能通过返回 return false 的形式组织事件宿主的默认行为。
注意：以上都是基于W3C标准，没有考虑到IE的不同实现。
更多关于JavaScript事件的学习，建议大家有可以阅读这篇文章：
在文章中找不到问题答案？您还可以
热门栏目订阅js阻止冒泡和默认事件（默认行为）详解
作者：张飞翔
字体：[ ] 类型：转载 时间：
这篇文章主要为大家详细介绍了js阻止冒泡和默认事件，即默认行为,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js阻止冒泡和默认事件方法，供大家参考，具体内容如下
阻止冒泡。冒泡简单的举例来说，儿子知道了一个秘密消息，它告诉了爸爸，爸爸知道了又告诉了爷爷，一级级传递从而引起事件的混乱，而阻止冒泡就是不让儿子告诉爸爸，爸爸自然不会告诉爷爷了。下面的domo就是很好的例子。
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&&/title&
&style type="text/css"&
width: 300
height: 300
background:
&script type="text/javascript"&
window.onload = function() {
var btn = document.getElementById('btn');
var box = document.getElementById('box');
btn.onclick = function(ev) {
var oEvent = ev ||
box.style.display = 'block';
//oEvent.cancelBubble =//高版本浏览器
stopBubble(oEvent);
//在低版本的chrome和firefox浏览器中需要兼容性处理
//高版本chrome和firefox浏览器直接使用上面这行代码即可
document.onclick = function() {
box.style.display = 'none';
//阻止冒泡事件的兼容性处理
function stopBubble(e) {
if(e && e.stopPropagation) { //非IE
e.stopPropagation();
} else { //IE
window.event.cancelBubble =
&input type="button" id="btn" value="语言" /&
&div id="box"&&/div&
我所实现的效果是：点击按钮btn让box显示，而点击其他地方则让box消失。
如果我不阻止冒泡的话，那么首先btn会触发点击时间，让盒子显示，但是由于box是包含在document中的，所以会向上冒泡又触发document的点击事件，盒子又消失。这个事件的执行顺序可以在不同的点击事件中使用alert来验证。关于cancelBubble的兼容性处理在高版本的chrome和firefox中已经不需要兼容处理了，直接使用oEvent.cancelBubble = true 即可。下面的阻止浏览器事件的兼容性处理在高版本浏览器中同样不需要。
默认事件。即浏览器本身具备的功能。
function preventDefa(e){
if(window.event){
//IE中阻止函数器默认动作的方式
window.event.returnValue =
//阻止默认浏览器动作(W3C)
e.preventDefault();
这种是兼容性写法，但是如果你只需要支持高版本浏览器的话，那么如上文一样，一句话即可。
btn.onclick = function (){
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具　　事件冒泡：什么是事件冒泡，通俗的来讲就是我们为页面内body添加一个单击事件，同样再为页面内li元素添加一个单击事件。当你单击li的时候，body的事件也会被触发，因为li被包含在body元素内，所以你单击了li同时也单击了body。这就是事件冒泡！　　在有些时候，我们要阻止这种情况发生，也就是单击li事件，不会触发body的事件。 这就叫阻止冒泡!　　下面是一个小DEMO：　　01　　&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&　　02　　&html xmlns="http://www.w3.org/1999/xhtml"&　　03　　&head&　　04　　&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&　　05　　&title&防止冒泡&/title&　　06　　&style&　　07　　body { color:#333; font-size:12 }　　08　　&/style&　　09　　&/head&　　10　　&body&　　11　　&p&什么是事件冒泡,通俗的来讲就是 我们为页面内body添加一个单击事件,同样再为页面内li元素添加一个单击事件..当你单击li的时候.&br&　　12　　body的事件也会被触发.....因为li被包含在body元素内...你单击了li同时也单击了body...这就是事件冒泡....&br /&　　13　　在有些时候.我们要阻止这种情况发生...也就是单击li事件.不会触发body的事件.... 这就叫阻止冒泡!　　14　　&div id="a"&　　15　　&ul id="lia"&　　16　　请单击下面的列表.会触发body事件　　17　　&li&项目1&/li&　　18　　&li&项目2&/li&　　19　　&li&项目3&/li&　　20　　&/ul&　　21　　&ul id="lib"&　　22　　请单下面的列表.不会触发body事件.　　23　　&li&项目1&/li&　　24　　&li&项目2&/li&　　25　　&li&项目3&/li&　　26　　&/ul&　　27　　&/div&　　28　　&script language="javascript"&　　29　　document.body.onclick = function(){//首先为body元素绑定一个单击事件　　30　　alert("BODY事件");//单击页面即弹出对话框　　31　　}　　32　　33　　function att_Event(){//为第一组li元素绑定onclick事件　　34　　var li = document.getElementById("lia").getElementsByTagName("li");　　35　　for(var i=0;i&li.i++){　　36　　li[i].onclick = function(){　　37　　alert("Li事件");　　38　　}　　39　　}　　40　　}　　41　　42　　function att_Event_b(){//为第二组li元素绑定onclick事件　　43　　var li = document.getElementById("lib").getElementsByTagName("li");　　44　　for(var i=0;i&li.i++){　　45　　li[i].onclick = function(e){　　46　　alert("Li事件");　　47　　stopBubble(e); //运行阻止冒泡的函数　　48　　}　　49　　}　　50　　}　　51　　//该函数的功能用来阻止事件冒泡．并兼容多浏览器　　52　　function stopBubble(e){　　53　　//如果传入了事件对象.那么就是非IE浏览器　　54　　if(e){　　55　　//因此它支持W3C的stopPropation()方法　　56　　e.stopPropagation();　　57　　}　　58　　else{　　59　　//否则,我们得使用IE的方式来取消事件冒泡　　60　　window.event.cancelBubble =　　61　　}　　62　　}　　63　　64　　window.onload = function(){　　65　　att_Event();　　66　　att_Event_b();　　67　　}　　68　　&/script&　　69　　&/body&　　70　　&/html&　　本文由麦克疯下载：/ 提供
楼主发言：1次 发图：0张 | 更多
请遵守言论规则，不得违反国家法律法规回复(Ctrl+Enter)}