首页 > 代码库 > 事件冒泡中的两个鼠标事件
事件冒泡中的两个鼠标事件
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type ="text/css"> #divf { width:400px; border :1px solid #0094ff; height :300px; } #divs { width:300px; border :1px solid #0094ff; height :200px; } </style> <script src="http://www.mamicode.com/Scripts/jquery-1.8.2.min.js"></script> <script type ="text/javascript"> $(function () { //1.0 mouseenter 不会触发事件冒泡 //2.0 mouseover 会触发 事件冒泡 document.getElementById("divf").onclick = function (c) { alert("divf,被点了" + c + " target=" + c.target + "currentTarget=" + c.currentTarget); //target 表示当前触发事件的元素 //currenttarget 表示当前执行事件的元素 }; document.getElementById("divs").onclick = function (c) { alert("divs,被点了" + c+" target="+c.target+"currentTarget="+c.currentTarget); // c.stopPropagation();//阻断事件冒泡 c.preventDefault();//阻断事件的默认行为 }; $("div").click(function (e) {//此时的e事件参数由jquery传入 alert(this.id + e); // e.stopPropagation();//阻断事件 // e.preventDefault();//阻断事件默认行为 }); }); </script></head><body> <div id ="divf"> <div id="divs"></div> </div></body></html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。