JavaScript 拒绝事件冒泡，拒绝默认操作 整理

    <div class="parent">
        <a href="http://www.jnqianle.cn">
            http://www.jnqianle.cn
        </a>
    </div>

 

一、JavaScript 拒绝事件冒泡，拒绝默认操作 整理

//JavaScript 拒绝默认操作
var aList = document.querySelectorAll('a');

aList.forEach(q => {
    //注册事件， 拒绝冒泡 ，传参false
    q.addEventListener('click', function (e) {
        //拒绝默认事件
        e.preventDefault();
        //拒绝冒泡
        e.stopPropagation();
    }, false);
});

//注册事件， 拒绝冒泡 ，传参也得false
var parent = document.querySelector('.parent');
parent.addEventListener('click', function (e) {
    alert('parent');
}, false);

 

 

二、Jquery 拒绝事件冒泡，拒绝默认操作

//Jquery 拒绝默认操作
$('a').click(function (e) {
    //单项操作
    // //拒绝默认事件
    // e.preventDefault();
    // //拒绝冒泡
    // e.stopPropagation();

    //拒绝事件冒泡，并且默认操作
    return false;
});

$('.parent').click(function () {
    alert('parent');
});

 

 

更多：

HTML DOM 简介 和整理 

JavaScript Attr对象 | Dom属性对象 

JavaScript Element对象 | Dom元素对象、元素节点