页面内部DIV让点击外部DIV 事件不发生(阻止冒泡事件)

如标题的情况,经常发生,尤其是在一些弹出框上面之类的。

<script>
    function zuzhimaopao(){
        e.stopPropagation();
    }
</script>

一般的google浏览器添加上面此项就可以,但是发现在FF下并不工作,于是有了如下:

function getEvent(){
        if(window.event)    {return window.event;}
            func=getEvent.caller;
            while(func!=null){
             var arg0=func.arguments[0];
             if(arg0){
                 if((arg0.constructor==Event || arg0.constructor ==MouseEvent
                    || arg0.constructor==KeyboardEvent)
                    ||(typeof(arg0)=="object" && arg0.preventDefault
                    && arg0.stopPropagation)){
                     return arg0;
                 }
             }
             func=func.caller;
        }
        return null;
    }
    //阻止冒泡
    function cancelBubble()
    {
        var e=getEvent();
        if(window.event){
            //e.returnValue=false;//阻止自身行为
            e.cancelBubble=true;//阻止冒泡
        }else if(e.preventDefault){
            //e.preventDefault();//阻止自身行为
            e.stopPropagation();//阻止冒泡
        }
    }

只要在你的方法最后插入

cancelBubble();就可以了。很实用
时间: 2025-01-18 14:38:25

页面内部DIV让点击外部DIV 事件不发生(阻止冒泡事件)的相关文章

div嵌套点击事件问题解决方法-阻止冒泡事件

<html> <body> <li onclick="javascript:alert(1);">11111 <li onclick="javascript:alert(2);">  22222 <li id="li3" onclick="javascript:alert(3);">    33333 </li> </li> </li&g

点击tr实现选择checkbox功能,点击checkobx的时候阻止冒泡事件, jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态

给tr添加点击事件,使用find方法查找tr下的所有层级的元素,children只查找下一层级的元素,所以使用find.find的返回值为jquery对象,在这个项目中不知道为什么使用jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态,所以我就把jquery对象转换为DOM对象,怎么转呢?jquery对象[0]或者get(0)就转换成DOM对象,然后直接.checked返回true或false就可以判断checkbox是否选中了.然后判断状

js实现冒泡事件,点击ul给子标签添加相同事件和阻止冒泡事件

$('#LocalLife_PopUp_layer').find('.SelectCity_Cont ul').click(function(e){            var e=e||window.event;            var obj=e.target||e.srcElement;            $('#LocalLife_PopUp_layer').find('.SelectCity_Cont ul').find('i').removeClass("Selectma

Vue小基础鼠标点击和阻止冒泡

1.once修饰符的使用(once修饰符是让点击事件只能够执行一次). 2,阻止冒泡事件,使用JS阻止和Vue修饰符stop阻止 <div id="app"> <p>{{ age }}</p> <!-- 使用Vue的once修饰符,让点击事件只能使用一次 --> <button @click.once='btn'>只能点击一次</button> <button @click='btn2(10)'>加10

jq效果 点击隐藏和显示(组织冒泡事件)

一个button按钮,当我点击button后弹出DIV层, 当我点击DIV层以外的地方时候把DIV隐藏 大概代码如下: <input type="button" id="js_button" /> <div id="js_div" style="width: 100px; height: 100px; display: none"> </div> <script type="

点击出现蒙层,然后点击空白地方蒙层消失(阻止冒泡)

要做一个这样的蒙层很简单.要实现点击空白地方蒙层消失的时候要注意 $(触发蒙层对象).click(function(e){ e.stopPropagation();          //这里阻止冒泡事件是最重要的,如果不阻止冒泡,会导致蒙层出现之后马上消失.就是因为点击事件冒泡到document上了. 蒙层出现: //或者是蒙层出现后return false.也能达到同样效果. }) $(document).click(function(){ if(蒙层.css("display")

页面table的每行都有一个&lt;input type=&#39;button&#39; /&gt;,如何实现点击按钮在按钮下方弹出一个div,点击空白消失

\ <input id="test" type="button" />/*按钮*/ <div id="tanchu"></div> <script language="javascript"> $(document).ready(function(e) { $("#test").click(function(e) { $("#tanchu"

jQ禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于Jquery集合中、使DIV可点击、克隆对象、使元素居中、计算元素个数、使用Google主机上的Jquery类库、禁用Jquery效果、解决Jquery类库与其他Javascript类库冲突

1. 禁止右键点击 代码如下: $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2. 隐藏搜索文本框文字 代码如下: $(document).ready(function() { $("input.text1").val("Enter your search text here"); textFill($

点击div和某些控件之外的地方隐藏div,点击div不隐藏。对象 click和document click冲突有关问题

帮朋友解决这个问题,我发现用以往想想像的方式来实现,貌似不太可行,所以从网上找了一些解决办法,进行优化,这篇比较详细,所以拿来备忘,另一方面也希望可以帮助需要的同学! 问题背景:jQuery事件问题!!对象 click和document click冲突问题 我想点击某个元素显示一个对象, 点击页面任意处,隐藏这个对象 //点击look对象,显示隐藏mydiv $("#look").bind("click", function () {      $("#m