jQuery中处理事件冒泡的方法和取消后续内容的方法

一：事件冒泡的意思是：一个大的容器已经设置了事件，如果这个容器里还包容着一个小的容器也设置了自己的事件，那么因为小容器是在大容器里面的，触发小容器的事件同时也等于触发了大容器的事件，有时这并不是我们想要的结果，我们可以通过能力检测来阻止事件冒泡如：

其中<dt><img src="img/pic.gif" alt="非缘勿扰"/><img src="img/col.gif" alt="收藏本片"/></dt>
我的dt标签里放了两张图，我设置了dt的点击事件：
$('dt').addClass('words').click(function () {
$('dd strong').css('color', '#FF0099');
});

那么我的第二张图片点击事件会同时触发两个事件，因为都同在dt标签里
            $('img[alt=收藏本片]').click(function (event) {
                alert('您已收藏成功！');
            })

此时我可以用能力检测的方法判断浏览器的解析能力，根据不同浏览器选用不同方法：
            $('img[alt=收藏本片]').click(function (event) {
                alert('您已收藏成功！');
               //取消事件冒泡，要进行能力检测，也就是分IE和非IE两种情况
                //01.第一道能力检测，event对象在IE下写法是window.event，而在
                //非IE下直接用event;
                event = event || window.event;
                //第二道能力检测
                if (event.stopPropagation) {
                    //IE浏览器管用
                    event.stopPropagation();
                } else {
                   event.cancelBubble = true;
                }
            })

二：取消后续执行内容如例所示：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        //点击a标签，不进行页面跳转
        window.onload = function () {
            var obj = document.getElementById("myhref");
            obj.onclick = function (event) {
                //取消默认行为
                //return false;
                //分浏览器
                //IE下
                //01.第一道能力检测
                event = event || window.event;
                if (event.preventDefault) {

//非IE下
                    event.preventDefault();
                } else {
                    event.returnValue = false;
                }
            };
        }
    </script>
</head>
<body>
<a id="myhref" href="http://www.baidu.com">去百度</a>
</body>
</html>

这里的a标签的点击效果本来是要跳转到百度页面的，但是我们通过参数取消默认行为的方式可以让这个点击事件的后续内容不执行。

秒客网

jQuery中处理事件冒泡的方法和取消后续内容的方法

相关文章