JavaScript起步(二十-DOM事件三)| 一起学系列

74 阅读1分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第18天,点击查看活动详情

  • 取消默认行为和阻止事件传播的方式

    • e.preventDefault();  取消默认行为(比如点击a进行跳转)

    • e.returnValue = false;      取消默认行为,低版本浏览器使用

    • e.stopPropagation(); 阻止冒泡,标准方式

    • e.cancelBubble = true;阻止冒泡,IE低版本,标准中已废弃

    • DOM提供了一套与元素自身有关的位置和大小属性

  • 偏移量属性(须打点调用)

    • offsetParent 偏移参考父级,距离自己最近的有定位的父级,如果都没有定位参考body(或html)

    • offsetLeft/offsetTop 偏移位置

    • offsetWidth/offsetHeight 偏移大小 image.png

  • 客户端大小

    • client系列没有参考父级元素

    • clientLeft/clientTop  边框区域尺寸,不常用(边框的宽度和高度)

    • clientWidth/clientHeight 边框内部大小 image.png

  • 滚动偏移属性

    • scrollLeft/scrollTop  盒子内部滚动出去的尺寸

    • scrollWidth/scrollHeight 盒子内容的宽度和高度

    • 滚动条滚动事件:onscroll image.png

  • 鼠标拖拽案例

    • 注意点:e需要写在每层函数中,并且注意在给元素设置left和top值时,需要在最后+”px”;在设置鼠标松开不移动窗口时,可以给在drop.onmouseup中drop.onmousemove设置空值即可

    • 鼠标按下事件:onmousedown

    • 鼠标松开事件:onmouseup image.png image.png

  • 弹出层案例:

    • 注意点:须给弹出的窗口设置z-index值,让其显示在最高层;

    • 新学CSS样式:user-select:文本是否能被选中属性

    • cursor: move;游标变成移动样式;filter:alpha(opacity=30);滤镜效果

    • 设置文本右边对齐:设置label标签相同宽度,然后text-align: right; image.png