携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第18天,点击查看活动详情
-
取消默认行为和阻止事件传播的方式
-
e.preventDefault(); 取消默认行为(比如点击a进行跳转)
-
e.returnValue = false; 取消默认行为,低版本浏览器使用
-
e.stopPropagation(); 阻止冒泡,标准方式
-
e.cancelBubble = true;阻止冒泡,IE低版本,标准中已废弃
-
DOM提供了一套与元素自身有关的位置和大小属性
-
-
偏移量属性(须打点调用)
-
offsetParent 偏移参考父级,距离自己最近的有定位的父级,如果都没有定位参考body(或html)
-
offsetLeft/offsetTop 偏移位置
-
offsetWidth/offsetHeight 偏移大小
-
-
客户端大小
-
client系列没有参考父级元素
-
clientLeft/clientTop 边框区域尺寸,不常用(边框的宽度和高度)
-
clientWidth/clientHeight 边框内部大小
-
-
滚动偏移属性
-
scrollLeft/scrollTop 盒子内部滚动出去的尺寸
-
scrollWidth/scrollHeight 盒子内容的宽度和高度
-
滚动条滚动事件:onscroll
-
-
鼠标拖拽案例
-
注意点:e需要写在每层函数中,并且注意在给元素设置left和top值时,需要在最后+”px”;在设置鼠标松开不移动窗口时,可以给在drop.onmouseup中drop.onmousemove设置空值即可
-
鼠标按下事件:onmousedown
-
鼠标松开事件:onmouseup
-
-
弹出层案例:
-
注意点:须给弹出的窗口设置z-index值,让其显示在最高层;
-
新学CSS样式:user-select:文本是否能被选中属性
-
cursor: move;游标变成移动样式;filter:alpha(opacity=30);滤镜效果
-
设置文本右边对齐:设置label标签相同宽度,然后text-align: right;
-