封装 scroll client 兼容
function scroll(){
if(window.pageXOffset != null){ // ie9 +
return {
left:window.pageXOffset,
top:window.pageYOffset
}
}else if(document.compatMode == "CSS1Compat"){ // 标准模式
return {
left:document.documentElement.scrollLeft,
top:document.documentElement.scrollTop
}
}else{ // 怪异模式
return {
left:document.body.scrollLeft,
top:document.body.scrollTop
}
}
}
function client(){ // 屏幕宽高
if(window.innerWidth != null){ // ie9 +
return {
width:window.innerWidth,
height:window.innerHeight
}
}else if(document.compatMode == "CSS1Compat"){ // 标准模式
return {
width:document.documentElement.clientWidth,
height:document.documentElement.clientHeight
}
}else{ // 怪异模式
return {
width:document.body.clientWidth,
height:document.body.clientHeight
}
}
}
client家族
client就是可视区域
offsetwidth ：width+ padding+border
clientwidth :width+padding (不包含border)；
scrollWidth: 大小就是内容大小；
1.1 检测屏幕可视区域宽度
screen.availWidth 获取整个屏幕的宽度，和你浏览器大小无关
document.body.clientWidth 获取浏览器可见区域的宽度
多个写法：和scrollTop一样，也有不同浏览器的不同兼容：
Ie9以及以上的版本：
window.innerWidth
标准模式：
Document.documentElement.clientWidth
怪异模式：
Document.body.clientWidth
1.2 改变窗口事件
昨天学了屏幕滚动事件：window.onscroll=function(){}
改变窗口大小事件：window.onresize=function(){}
1.3 简单的冒泡机制
这里的冒泡机制，不是前面说的冒泡排序，而是事件的冒泡
什么是冒泡？就是在水的最底层，生成一个泡泡，然后一直往水面浮，一直浮到最上层，然后炸开；
什么是事件冒泡？当一个元素上的事件被触发的时候，比如说，鼠标点击一个按钮，那么，同样的事件，会被这个元素的所有祖先元素触发，这个过程，被称之为事件冒泡；
阻止事件冒泡
obj.onclick = function(e){
var e = e || window.e; // 兼容
if(e && e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
1.4 冒泡顺序：
IE6.0
div>body>html>document;
其他浏览器
div>body>html>document>window;
不是所有事件都能冒泡，以下事件不行
：blur、focus、load、unload；
事件冒泡，有好有坏，有时候我们需要冒泡，有时候，我们不需要，那么，就要阻止冒泡；
标准浏览器(w3c)：
event.stopPropagation() propagation 传递；
IE 6 7 8：
event.cancelBubble=true;
判断当前对象：
火狐 谷歌等常用浏览器 event.target.id
Ie678 event.scrElement.id;
if(event.target.id){
event.target.id
}else{
event.scrElement.id;
}
var targeteid= event.target.id? event.target.id: event.scrElement.id;
1.5 获取用户选中文字：
window.getSelection().toString();
IE写法：
document.selection.createRange().text
兼容性写法：
if(window.getSelection){
var txt= window.getSelection().toString();
}else{
var txt=Document.selection.createRange().text
}
demo 兼容点击空白隐藏
<style>
body{
height: 2000px;
}
#mask{
width: 100%;
height: 100%;
opacity: 0.4;
filter: alpha(opacity=40);/*ie半透明写法*/
background: black;
position: fixed;
top: 0;
left: 0;
display: none;
}
#show{
width: 300px;
height: 300px;
background: #fff;
position: fixed;
left: 50%;
top: 50%;
margin: -150px 0 0 -150px;
display: none;
}
</style>
</head>
<body>
<a href="javascript:;" id="login">注册</a>
<a href="javascript:;">登录</a>
<div id="mask"></div>
<div id="show"></div>
</body>
<script>
function $(id){return document.getElementById(id);}
var login=document.getElementById("login");
login.onclick=function(event){
var event=event||window.event;
if(event&&event.stopPropagation){event.stopPropagation();}else{event.cancelBubble=true;}
$('mask').style.display='block';
$('show').style.display='block';
};
document.onclick=function(event){
var event=event||window.event;
var targetId=event.target?event.target.id:event.srcElement.id;
if(targetId!='show'){
$('mask').style.display='none';
$('show').style.display='none';
}
}
</script>
demo 选中文字弹出层
<style>
div {
width: 400px;
margin: 50px;
}
#demo {
width: 100px;
background-color: pink;
position: absolute;
top: 0;
left: 0;
display: none;
}
</style>
<body>
<span id="demo"></span>
<div id="text">我要复制的文字我要复制的文字我要复制的文字我要复制的文字
我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字
我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字
我要复制的文字我要复制的文字我要复制的文字我要复制的文字</div>
<div id="another">
我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字
我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字
我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字
</div>
<script>
function $(id){
return document.getElementById(id);
}
$('text').onmouseup=function(event){
var e=event||window.event;
var x=e.clientX;
var y=e.clientY;
if(window.getSelection){
var txt=window.getSelection().toString();
}else{
var txt=document.selection.createRange().text;
}
if(txt){//字符串有东西就是真，为""就是假
showbox(x,y,txt);
}
document.onmousedown=function(e){
var e=e||window.e;
var targetId=e.target?e.target.id:e.srcElement.id;
if(targetId!='demo'){
$('demo').style.display='none';
}
}
</script>
网友评论