JavaScript停止冒泡和阻止浏览器默认行为

1.事件兼容

window.event是IE的事件

function fn (e) { 
     e = e ? e : window.event;
 }

2.js停止冒泡

 window.event.cancelBubble是IE阻止冒泡，e.stopPropagation()是W3C阻止冒泡

function fn (e) {
    window.event ? window.event.cancelBubble = true : e.stopPropagation();
}

<script>
    //不阻止冒泡，依次弹出‘我是div’、‘我是ul’、‘我是li’
    function clickFn (name) {
        alert('我是'+name);
    }
</script>
<div onclick="clickFn('div')">
    <ul onclick="clickFn('ul')">
        <li onclick="clickFn('li')">点击</li>
    </ul>
</div>

<script>
    //阻止冒泡，只弹出‘我是li’
    function clickFn (name) {
        window.event.stopPropagation();
        alert('我是'+name);
    }
</script>
<div onclick="clickFn('div')">
    <ul onclick="clickFn('ul')">
        <li onclick="clickFn('li')">点击</li>
    </ul>
</div>

3.js阻止默认行为

window.event.returnValue 是IE阻止默认行为，e.preventDefault()是W3C阻止默认行为

function myfn(e){
    window.event ? window.event.returnValue = false : e.preventDefault();
}

 

<script>
    //不阻止默认行为，弹出‘我是li’，并跳转"http://www.baidu.com"
    function clickFn (name) {
        alert('我是'+name);
    }
</script>
<div>
    <ul>
        <li onclick="clickFn('li')"><a href="http://www.baidu.com"></a>点击</li>
    </ul>
</div>

<script>
    //阻止默认行为，弹出‘我是li’，不跳转"http://www.baidu.com"
    function clickFn (name) {
        window.event.preventDefault();
        alert('我是'+name);
    }
</script>
<div>
    <ul>
        <li onclick="clickFn('li')"><a href="http://www.baidu.com"></a>点击</li>
    </ul>
</div>