前端异常问题日志

迷路的烤肉
1,212 阅读2分钟

记录下自己开发时遇到的异常和兼容问题

HTML 属性相关

  • autofocus

基本概念

autofocus 特性让你能够指定一个表单控件，当页面载入后该表单自动获得焦点，除非用户覆盖它，例如在另一个控件中输入值。一个文档内只有一个表单能够拥有 autofocus 特性，它是一个 Boolean 值。这个特性适用于 

<input>, <button>, <select>, 与 <textarea>元素

例外情况是，如果一个 autofocus 元素的 type 特性值设置成了 hidden，则 autofocus 无法生效(就是说，你无法让一个隐藏控件自动获得焦点)。

可能导致的问题

1.autofocus使input获取焦点时，不会触发focus事件，此时再次点击input 因为focus已经获取焦点，所以依旧不会触发focus事件

推荐使用mousemove和click事件结合，手动触发focus事件内的内容

2.autofocus使input获取焦点时切换标签页，会触发input的blur事件，但是当再切换会原来的标签页时，会再次使input获取焦点，同时触发focus事件（如果手动点击页面使input失去了焦点，此时切换标签页后input不会重复获取焦点）

3.由于浏览器的限制策略，无法通过js直接使input获取焦点，但是可以在用户手动触发click时调用focus事件，此时可以使input获取焦点

CSS 相关

  • animation

基本概念

animation 属性用来指定一组或多组动画，每组之间用逗号相隔。

safari 中的异常行为

@keyframes kk {  
    from {       
        opacity: 0;
    }  
    to {    
        opacity: 0.6;
        width: 10px;
        pointer-events: auto;    }
}
.dd {
  opacity: 0;
  pointer-events: none;
}
.dd:hover {
    animation: kk 0.3s forwards;
}

有时我们会做一个隐藏的按钮，等鼠标移入的时候再显示，为了使节点出现的不是那么突兀，会设置透明和不可点击，但是在safari中这种设置是有一些问题的；

该动画效果中 to 时的状态包含的内容与from中的不一致

safari中pointer-events属性会被忽略，此时需要在hover伪类中单独设置此属性的状态

chrome中可以执行pointer-events相关的变化

暂时未发现其他属性有类似问题；

JS 相关

  • scroll 事件

基本概念

文档视图或者一个元素在滚动时，会触发元素的**scroll**事件。

safari 中的异常

safari中当滚动条触底或者触顶时，依然可以拖动滚动条来触发滚动事件

此时需要对scroll事件添加判断代码，避免不必要的程序执行造成异常

~~~

待续

avatar
文章
阅读
粉丝