on事件绑定阻止冒泡的问题

当使用on进行事件绑定时当要给document绑定click,而子元素要禁止冒泡,那么子元素里面的子元素的click事件就会无效了,

下面无效版:

$(‘#queue‘).on(‘click‘, ‘.link‘, function() {
        var t = $(this)
        ,box = t.next()
        if(t.hasClass(‘active‘)) {
            box.hide()
            t.removeClass(‘active‘)
        }
        else {
            box.show()
            t.addClass(‘active‘)
        }
        event.stopPropagation()
    })

//排队列表收缩
    $(document).on(‘click‘,‘body‘,function(){
        $(‘.link‘).removeClass(‘active‘)
        $(‘.queue-box‘).hide();
    })
    $(‘#queue‘).on(‘click‘,‘.queue-box‘,function(){//绑 $(‘#queue‘)或 $(document)都一样
        event.stopPropagation()

//主要是下面
            $(document).on(‘click‘,‘.btn-queue-join‘,function(){
                mywebsocket.send(JSON.stringify({
                    "action": "patientJoinQueue",
                    "patientCode": patientCode,
                    "orderCode": $(this).parents(‘.item‘).attr(‘data-id‘)
                }))
            });
//修改$(document)为$(‘.queue-box‘)就可以了
            $(‘.queue-box‘).on(‘click‘,‘.btn-queue-join‘,function(){
                mywebsocket.send(JSON.stringify({
                    "action": "patientJoinQueue",
                    "patientCode": patientCode,
                    "orderCode": $(this).parents(‘.item‘).attr(‘data-id‘)
                }))
            });


参考http://www.cnblogs.com/tengj/p/4794947.html对其进行了理解

暂时没空后面补理解

时间: 2024-12-17 02:47:25

on事件绑定阻止冒泡的问题的相关文章

js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)

网上有关这方面的代码比较多而乱,这里整理一下并加以改进. 添加事件 var addEvent = function( obj, type, fn ) { if (obj.addEventListener) obj.addEventListener( type, fn, false ); else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj.attachEvent( "on"+type, function() {

DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理

事件对象——兼容处理 1 /* 2 * 功能: 事件对象兼容 3 * 参数: 表示常规浏览器的事件对象e 4 */ 5 function getEvent(e) { 6 7 // 如果存在e存在,直接返回,否则返回window.event 8 return e || window.event; 9 } 获取事件所对应的目标——兼容处理 1 /* 2 3 * 功能: 获取事件所对应的目标 4 5 * 参数: 表示常规浏览器的事件对象e 6 7 */ 8 9 function getTargetBy

on绑定阻止冒泡失败

使用zepto库,有如下dom 1 <div id="J_parent"> 2 <a href="#"> 3 <span>点我有惊喜</span> 4 </a> 5 </div> 以上div内的节点是后续生成的,通过on绑定事件: 1 $('#J_parent').on('tap', 'span', function(e){ 2 e.preventDefault(); 3 e.stopPropa

点击事件阻止缺省事件以及阻止冒泡

1 function stopEvent(e){ 2 stopDefault(e); 3 stopBubble(e); 4 } 5 //阻止缺省事件发生 6 function stopDefault(e){ 7 if(e.preventDefault){ 8 e.preventDefault(); 9 }else{ 10 e.returnValue=false; 11 } 12 } 13 //阻止冒泡发生 14 function stopBubble(e){ 15 if(e.stopPropag

JS点击子元素不触发父元素点击事件(js阻止冒泡)

<html> <title></title> <head> <meta charset="utf-8"> <style type="text/css"> .divone{width:100px;height:100px;background:black;position: relative;cursor: pointer} .divchild{position: absolute;margin:

阻止默认事件和阻止冒泡的应用场景

阻止默认事件,比如这个: <a href="https://www.baidu.com"> <div> <span>取消</span> </div> </a> 比如这样的一个需求 点击取消按钮的时候会触发一些js动作,但是不能让这个div产生跳转行为,所以需要在点击取消的时候 阻止冒泡,防止其跳转. 阻止冒泡,比如最简单的弹出层,当点击确认提交按钮的时候实际上点击事件是会往上冒泡,而一般我们取消遮罩的时候,都是通过

&lt;jQuery&gt; &lt;方法&gt; 十八. 移除事件, 触发事件, 事件对象(阻止冒泡, 阻止跳转)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>RayLee</p> <p>RayLee</p> <p>RayLee</p> <input

jQuery中的冒泡事件和阻止冒泡

jQuery代码 <script type="text/javascript"> $(function () { $("#p1").click(function () { alert("p1被点了"); }); $("#td1").click(function (e) { alert("td1被点了"); e.stopPropagation() }); //阻止冒泡 $("#tr1&q

最简单冒泡事件及阻止冒泡事件

html代码 <script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script> <div id="div1" style="height:200px;width:200px;background-co