老师这样为什么不能阻止冒泡呢，点击a的时候还是会输出a和div1

来源：19-2 事件-代码演示

石燕平

2018-05-06

<body>
<div id="div1">
    <a href="http://www.baidu.com" id="a">百度</a>
    <p id="p1">this is p1</p>
    <p id="p2">this is p2</p>
</div>
<div id="div2">
    <p id="p3">this is p3</p>
    <p id="p4">this is p4</p>
</div>
<script>
    var div1 = document.getElementById('div1');
    var p1 = document.getElementById('p1');
    var a = document.getElementById('a');

    function bindEvent(ele, type, selector, fn) {
        if (fn == null) {
            fn = selector;
            selector = null;
        }
        ele.addEventListener(type, function (e) {
            var target;
            if (selector) {
                // 使用事件代理
                target = e.target;
                if (target.matches(selector)) {
                    fn.call(target, e);
                }
            } else {
                // 不使用事件代理
                fn(e);
            }
        });
    }
    
    // 事件代理 
    bindEvent(div1, 'click', 'a', function (e) {
        e.stopPropagation();
        e.preventDefault();
        console.log('a');
    });
    
    bindEvent(div1, 'click', function (e) {
        console.log('div1');
    });
</script>
</body>

写回答

1回答