• JS阻止事件冒泡


    如下测试代码:

    <style type="text/css">
    	#div{border: 1px solid red; 500px;}
    	#p1,#p2{border: 1px solid red;}
    </style>
    <div id="div" onclick="clickDiv()">
    	我是外层DIV
    	<p id="p1" onclick="clickP1(event);">我是P1 阻止事件冒泡</p>
    	<p id="p2" onclick="clickP2();">我是P2 未阻止事件冒泡</p>
    </div>

    JS阻止事件冒泡代码:

    <script type="text/javascript">
    			
    	function clickDiv(){
    		alert("我是外层DIV");
    	}
    	function clickP1(e){
    		alert("p1 阻止事件冒泡");
    		e.stopPropagation();
    	}
    	function clickP2(){
    		alert("p2 未 阻止事件冒泡");
    	}
    	
    </script>

    jQuery阻止事件冒泡代码:

    $(function(){
    	$("#div").click(function(){
    		alert("我是外层DIV");
    	})
    	$("#p1").click(function(event){
    		alert("p1 阻止");
    		event.stopPropagation();
    	})
    	$("#p2").click(function(){
    		alert("p2 未阻止");
    	})
    })

    有时候点击提交按钮会有一些默认事件。比如表单提交(submit)

    可通过event.preventDefault();阻止默认行为

    $("input[type='submit']").click(function(event){
    	//在这里可以加入一些逻辑判断  以决定是否阻止默认行为
    	event.preventDefault();
    })

    PS:很多文章都提到下面代码

    function stopDefault(e) {  
    	//如果提供了事件对象,则这是一个非IE浏览器   
    	if(e && e.preventDefault) {  
    	  //阻止默认浏览器动作(W3C)  
    	  e.preventDefault();  
    	} else {  
    	  //IE中阻止函数器默认动作的方式   
    	  window.event.returnValue = false;   
    	}  
    	return false;  
    }
    先判断浏览器是否IE浏览器,本人的是IE9  无需判断

    照样可以阻止事件冒泡。

    对此问题不解...  不知道大家是人云亦云呢,还是我的方法不对疑问



  • 相关阅读:
    next_permitation
    POJ 1979 Red and Black
    POJ 2386 Lake Counting
    BFS简单迷宫
    部分和问题
    图论复习--二分图判断
    danci1
    danci
    jquery事件重复绑定解决办法
    danci
  • 原文地址:https://www.cnblogs.com/itmyhome/p/4131344.html
Copyright © 2020-2023  润新知