事件冒泡
在触发事件时候 会一层一层向上冒泡 (他会同时触发父类的事件)
阻止事件冒泡 意思就是组织事件的向上传递
btn.onclick = function(e){ //得到事件源对象 e = e || window.event //阻止事件向上冒泡 stopPropagtion这个方法可以阻止事件冒泡 且他遵从w3c规则 (兼容各大浏览器 ie9之前不兼容) //e.cancelBubble = true //取消冒泡 不建议写这种 //建议的写法 if(e.stopPropagation){ //如果浏览器可以使用 e.stopPropagation()//就使用这个 }else{ e.cancelBubble = true //如果不能使用就使用这个 } }
阻止默认行为
<a href = 'http://www.biadu.com'>a标签</a> //a 标签默认会跳转页面 document.getElementsByName('a')[0].onclick = function(e){ console.log('点击了'); //return false 阻止默认行为 遵从w3c但是ie9浏览器之前不支持(常用的) //return false //ie浏览器 兼容 其他浏览器也可以使用 //e.preventDefault() //阻止默认事件 //针对低版本浏览器 e.returnValue = false } }
阻止右键出现菜单
document.oncontextmenu = function(e){ //return false 后面的内容不会执行 return false一般放在最后一句 //如果第一个可以用就用第一个 不可以使用第二个 e.preventDefault?e.preventDefault():e.returnValue = false }
关于element元素的offset家族 偏移
// 偏移的父元素 var smallBox = document.querySelector('.smallBox') //在没有给innerBox加定位之前获取的是body //在给innerBox加了定位之后获取的是innerBox //是获取偏移的父元素 上级元素谁加了定位我就找谁 都没有加找body offsetParent有奶便是娘(谁加了定位我就找谁) //offsetParent不会找自己 找离自己近的且加了定位的 console.log(smal