欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

首页

javascript阻止事件冒泡和浏览器的默认行为 阻止子元素事件 有大用

shiping1 的头像
星期一, 2014-09-29 11:26 — shiping1 
 <script type="text/javascript">
    function f1(e){
        alert("你点击了一个链接");
        //取消冒泡
        e.cancelBubble = true;
    }
    function f2(e){
            alert("你点击了一个DIV");
    }
     </script>
    </head>
    <body style="font-size:30px;">
        <div onclick="f2(event);">
            <a href="javascript:;" onclick="f1(event);">ClickMe</a>
        </div>
    </body>



image.png

把子元素的click事件 放在父元素的click事件上面吧

来自  https://segmentfault.com/q/1010000000488770

jquery如何阻止子元素继承父元素的事件（又称事件冒泡）

2018年06月28日 11:38:14  阅读数：725更多
个人分类： 前端开发


非常简单，子元素上添加如下代码即可

  1. $("#div1").mousedown(function(event){

  3. event.stopPropagation();

  5. });
关键代码：event.stopPropagation()


来自  https://blog.csdn.net/nuc_badaomen/article/details/80840871


javascript阻止事件冒泡和浏览器的默认行为

在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题.[兼容IE和FF]

 

1.阻止事件冒泡,使成为捕获型事件触发机制.

1
2
3
4
5
6
7
8
9
function stopBubble(e) {                                        
//如果提供了事件对象，则这是一个非IE浏览器                                        
if ( e && e.stopPropagation )                                        
    //因此它支持W3C的stopPropagation()方法                                        
    e.stopPropagation();                                        
else                                        
    //否则，我们需要使用IE的方式来取消事件冒泡                                        
    window.event.cancelBubble = true;                                        
}                                        

 

2.当按键后,不希望按键继续传递给如HTML文本框对象时,可以取消返回值.即停止默认事件默认行为.

1
2
3
4
5
6
7
8
9
10
//阻止浏览器的默认行为                                        
function stopDefault( e ) {                                        
    //阻止默认浏览器动作(W3C)                                        
    if ( e && e.preventDefault )                                        
        e.preventDefault();                                        
    //IE中阻止函数器默认动作的方式                                        
    else                                        
        window.event.returnValue = false;                                        
    return false;                                        
}                                        

 

那么通过下面的一段代码我们来看下函数一的效果:

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>效果测试</title>
<script language="javascript" type="text/javascript" src="jquery-1.4.2.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$('div.c1').click(function(e){alert('单击了div');});
$('div.c2').click(function(e){alert('单击了div');stopBubble(e);});
$(document).click(function(e){alert('单击了document');});
$('#txt1').val('123');
$('#txt1').click(function(e){stopBubble(e);});
$('#txt1').keydown(function(e){stopDefault(e);alert('你按下了键值'+e.keyCode); });
})
 
function stopBubble(e) {
//如果提供了事件对象，则这是一个非IE浏览器
    if ( e && e.stopPropagation )
    //因此它支持W3C的stopPropagation()方法
    e.stopPropagation();
     else
    //否则，我们需要使用IE的方式来取消事件冒泡
    window.event.cancelBubble = true;
}
//阻止浏览器的默认行为
function stopDefault( e ) {
    //阻止默认浏览器动作(W3C)
    if ( e && e.preventDefault )
        e.preventDefault();
    //IE中阻止函数器默认动作的方式
    else
        window.event.returnValue = false;
    return false;
}
</script>
<style type="text/css">
body{
font-size:14px;
    }
}
.c1{
    font-family:"Arial Unicode MS"
    }
.c2{
    font-family:helvetica,simsun,arial,clean
    }
</style>
</head>
 
<body>
 
<div class="c1">测试的文字,这里是样式C1,单击以冒泡的形式触发事件.</div><hr/>
 
<div class="c2">测试的文字,这里是样式C2,单击以捕获的形式触发事件.</div><hr/>
 
<div><input id="txt1" name="Text1" type="text" /></div><hr/>
 
</body>
</html>
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>效果测试</title>
<script language="javascript" type="text/javascript" src="jquery-1.4.2.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$('div.c1').click(function(e){alert('单击了div');});
$('div.c2').click(function(e){alert('单击了div');stopBubble(e);});
$(document).click(function(e){alert('单击了document');});
$('#txt1').val('123');
$('#txt1').click(function(e){stopBubble(e);});
$('#txt1').keydown(function(e){stopDefault(e);alert('你按下了键值'+e.keyCode); });
})

function stopBubble(e) { 
//如果提供了事件对象，则这是一个非IE浏览器 
    if ( e && e.stopPropagation ) 
	//因此它支持W3C的stopPropagation()方法 
	e.stopPropagation(); 
     else 
	//否则，我们需要使用IE的方式来取消事件冒泡 
	window.event.cancelBubble = true; 
} 
//阻止浏览器的默认行为 
function stopDefault( e ) { 
    //阻止默认浏览器动作(W3C) 
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    //IE中阻止函数器默认动作的方式 
    else 
        window.event.returnValue = false; 
    return false; 
}
</script>
<style type="text/css">
body{
font-size:14px;
	}
}
.c1{
	font-family:"Arial Unicode MS"
	}
.c2{
	font-family:helvetica,simsun,arial,clean
	}
</style>
</head>

<body>

<div class="c1">测试的文字,这里是样式C1,单击以冒泡的形式触发事件.</div><hr/>

<div class="c2">测试的文字,这里是样式C2,单击以捕获的形式触发事件.</div><hr/>

<div><input id="txt1" name="Text1" type="text" /></div><hr/>

</body>
</html>
       

 

上面的效果测试中,

函数一:IE6.0,FireFox,Chrome,Opera均有效

函数二:在IE中测试效果很好;Chrome,Opera无效,在FF中,按键时,如果在

$('#txt1').keydown(function(e){stopDefault(e);alert('你按下了键值'+e.keyCode); });

这句话打个断点在执行,可以达到效果.但是如果不打断点则没有效果,没找出具体原因,如果有知道的可以说出来大家讨论下.


另外需要说的是,里面应用了JQuery库,刚开始学习中,所以这里应用了一下.就是简单的操作.应该能看懂.

另注参考资料:http://ooxxab.com/javascript-event-bubbling-and-prevent-the-default-behavior-of-the-browser.html        

来自 http://www.cnblogs.com/Ren_Lei/archive/2010/09/26/1836130.html


  1.  

           

jQuery如何阻止子元素继承父元素事件？                    

 35.5k 次浏览
0
<a>
    <b></b>
</a>
$("a").click(...);
                       

这种绑定的话，b也会响应一次事件，如何只对a元素绑定事件，而不对子元素绑定呢？即b被click之后自己并不触发回调函数，而是把事件传递给a。

我现在的做法是：直接在a上写 <a onclick="xxx"></a> ，这样b就不会把自己作为event.target触发回调了.

--- 更新 ----
大家可能对我的意思有误解，我不是要阻止事件冒泡，恰恰相反，我是要b在接受到click事件的时候直接把事件向上传递给a，就像我在代码里面指定的那样

---- 再次更新 ---
代码是这样的

$('a').click(function(evt){
       var self = $(evt.target);
       self.addClass('btn-primary');
});
                       

这时候，如果点击了b， 那么b会被加上btn-primary这个class，但是我想点击了b，也只是给a添加 这个class，希望处理事件的对象是a，不是b

----- 完结 ----
感谢 @冰果果，此处应该使用$(this) 而不是 $(evt.target),附区别
http://www.cnblogs.com/12go/archive/2011/12/28/2304502.html                        

这个问题已被关闭，原因：                     

                           
丁亚光  901                                
2014-04-30 提问                            
1                             

why not $(this)? what are pros of using $(evt.target)?

— 冰灵果 · 2014年04月30日                                

展开评论                    
默认排序时间排序                
2 个回答
1

已采纳                        

还是没太明白题主的问题，javascript 工作机制是这样的，当你点击内层的元素 b 时，首先浏览器会捕获这个事件，并定位当前的 DOM 元素，接下来采用冒泡机制，向上查找父元素，直到找到绑定了点击事件的元素 a 为止。
你是希望阻止这种冒泡还是什么呢？或者题主可以直接贴代码，再写需求。:)
你可以实现这么几个需求：
1.阻止事件冒泡，但不阻止默认行为。如 stopPropagation 或楼上用的 cancelBubble等。
2.阻止默认行为，但不阻止事件冒泡。如 preventDefault 方法。
3.同时阻止事件冒泡和默认行为。直接 return false 即可。

题主应该早点贴具体代码出来，这里对为什么用 this 做个解释，当你将子元素事件委托到父元素时，函数体内 this 将指向父元素，而 event.target 指向的是触发事件的子元素，这也是事件委托得以实现的基础。
推荐下 @TomDong 喵哥的博文 《事件委托和冒泡机制有关系吗？》
我也写过一篇介绍事件委托的博文 《Javascript - 事件委托是怎么工作的？》
题主不妨一读。:)

0

给b添加一个事件，里面禁止事件冒泡就行了 （这样也能消除父级对子级的影响）-->e.cancelBubble = true;

eg :

                                                       
   <script type="text/javascript">
    function f1(e){
        alert("你点击了一个链接");
        //取消冒泡
        e.cancelBubble = true;
    }
    function f2(e){
            alert("你点击了一个DIV");
    }
     </script>
    </head>
    <body style="font-size:30px;">
        <div onclick="f2(event);">
            <a href="javascript:;" onclick="f1(event);">ClickMe</a>
        </div>
    </body>





                       来自  https://segmentfault.com/q/1010000000488770




js事件冒泡、阻止事件冒泡以及阻止默认行为

  • 事件冒泡

    当事件发生后，这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身可能不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件），或者按钮的父级绑定有事件函数，当该点击事件发生在按钮上，按钮本身并无处理事件函数，则传播到父级去处理。

    什么是事件冒泡

    复制代码
    <!DOCTYPE html>
<html lang="en" onclick="alert('html')">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <title>Document</title>
</head>
<body onclick="alert('body')">
    <!--html-->
    <div style="width:400px; height:400px; background:red" onclick="alert(this.style.background)">
            <div id="div2" style="width:300px; height:300px; background:palevioletred">
                    <div style="width:200px; height:200px; background:yellow" onclick="alert(this.style.background)">
                            <div id="div1" style="width:100px; height:100px; background:palegreen">
                                <a id="aaa" href="http://www.baidu.com">aaa</a> 
                            </div>
                    </div>
            </div>
    </div>

    <script>
        //此jquery既阻止默认行为又停止冒泡
        // $("#div1").on('click',function(){
        //     return false;
        // });

        window.onload = function () {
            var oDiv1 = document.getElementById('div1');
            var oDiv2 = document.getElementById('div2');

            oDiv1.onclick = function (ev){
                var oEvent = ev || event;
                alert("this is div1");
                
                //js阻止事件冒泡
                //oEvent.cancelBubble = true;
                //oEvent.stopPropagation();

                //js阻止链接默认行为，没有停止冒泡
                //oEvent.preventDefault(); 
                //return false;
            }

            oDiv2.onclick = function (ev){
                var oEvent = ev || event;
                alert("this is div2");
                oEvent.cancelBubble = true; 
            }
        }
    </script>
</body>
</html>
    复制代码

     

     

     

路漫漫其修远兮，吾将上下而求索



来自   https://www.cnblogs.com/jsanntq/p/7681942.html



普通分类: 
javascript
Powered by Drupal

友情链接

校园好文网

 www.shipingzhong.cn  个人技术网_前端_后台    备案号:苏ICP备18010659号-2