父元素与子元素的点击事件影响问题

例如以下的代码：
html：

<div class="elementI" style="height: 100px;width: 100px;border: 1px solid red;">    父元素    <div class="elementII" style="height: 50px;width: 50px;border: 1px solid black;">子元素</div></div><script type="text/javaScript">    /*子元素绑定的事件*/    $(".elementI").click(function(){        alert("elementI");    });    /*父元素绑定的事件*/    $(".elementII").click(function(){        alert("elementII");    });</script>

达到的目的是，点击子元素区域只会触发子元素的事件，输出“elementI”,点击除“子元素”外的“父元素”区域输出“elementII”.

$(".elementI").click(function(event){    //谷歌、火狐兼容，IE不兼容    //alert("elementI");    //event.stopPropagation()//阻止事件冒泡    //IE下则使用    //event.cancelBubble = true;    if ((navigator.userAgent.indexOf('MSIE') >= 0)&& (navigator.userAgent.indexOf('Opera') < 0)){         event.cancelBubble = true;    }else{        event.stopPropagation();    }}); //在事件处理函数中添加event参数（或者任一个参数），当事件触发时，也就创建了事件对象，该事件对象只有该事件处理函数才能访问到，当事件处理函数运行结束时，事件对象自动删除$(Element).click(function(event){     ..................})当在含有事件对象的处理函数中返回false（return false;）,作用是阻止事件冒泡并且阻止元素默认行为。（元素的默认行为比如超链接的跳转、表单的提交等）$(Element).click(function(event){     ..................     return false;})​