前端零碎知识随笔

一、介绍

本篇博客主要使用来记录一些比较零碎的知识点，都是本人在日常开发工作中遇到的，或者是在学习过程中遇到的。因为这些知识点都比较零碎，为了防止遗忘，所以特意写一篇博客来记录，后面也不会不断慢慢更新的。

二、HTML相关

1、取消checkbox按钮在浏览器切换页面时状态的自动保存

我们在页面中使用<input type="checkbox" >的按钮，然后对修改了其状态，如果此时我们跳转到了其他页面，然后再通过浏览器的回退按钮，返回此页面，此时checkbox按钮状态是与页面跳转之前保持一致的，而且我们无法通过js获取到正确的按钮checked状态。因为浏览器默认会保存checkbox按钮的状态，如果我们不想让浏览器进行保存，只需要给checkbox按钮加上autocomplete="off" 属性即可：

图例：

解决方案：

 <input type="checkbox" autocomplete="off" class="checkbox-btn">

2、<a>标签设置target=''_blank之后在IOS的APP中无法正常跳转

在IOS的APP中打开的H5页面，是在WKWebView中打开的，其默认不会打开target="_blank"的<a>标签超链接，点击页面不会有任何反应。设置target="_self"或者不设置该属性的超链接可以正常跳转。
在Android的APP和浏览器，以及IOS的浏览器中，则不受影响，可以正常跳转。

解决方案

<!-- 设置target='_blank' 属性 不能正常跳转 -->
<a href="https://www.baidu.com" target="_blank">测试</a>
<!-- 不设置target属性 能正常跳转 -->
<a href="https://www.baidu.com">测试2</a>

二、CSS相关属性

1、清除IE浏览器中输入框自带的删除和查看icon图标

input输入框在讨厌的IE浏览器中会显示一个默认的删除图标，密码输入框会显示一个默认的查看图标，但通常我们都是不想要默认的图标的，所以我们要想办法隐藏。

图例：

解决方案：

input::-ms-clear,  /*  ::-ms-clear 是文本清除icon */
input::-ms-reveal {   /*  ::-ms-reveal是密码查看icon */
	display: none; 
	width: 0;
	height: 0;
}

2、font-weight属性设置数值在部分电脑上不起作用的原因

问题描述：

当我们给网页上的文本设置font-weight: 500/600...数值属性时，有时候在部分电脑上会出现并不显示加粗效果的情况。这是因为这个显示的加粗效果由用户端系统安装的对应字体变量映射决定，如果用户电脑上并没有该font-weight属性值所对应的字体，那么系统自动匹配最近的字体显示，此时有可能就是不加粗的正常字体，所以才会出现设置字体加粗但显示效果并未加粗的情况。
例如：Mac电脑使用的是苹方字体，Windows电脑使用的是微软雅黑。苹方有6种粗细：极细体，纤细体，细体，常规体，中黑体，中粗体；而微软雅黑一般只有三种：细体，常规体和粗体（Windows10家庭版，不同系统可能会有所不同）。所以我们在设置font-weight属性为数值时，在Mac电脑和Windows电脑的显示效果是有可能不同的，亲测font-weight: 500;在Mac上显示为有一定加粗效果的字体，在Windows上显示为不加粗的常规字体。

解决方案：

如果想要实现所有平台都加粗，那就不使用数值型的属性值，改用font-weight: bold;来加粗字体，基本上电脑都支持bold加粗。只不过这种加粗相对于font-weight: 500/600 来说会更粗一些，所以记得要征询UI设计师同事的意见。

3、pointer-events控制元素的鼠标事件

pointer-events属性可以控制元素是否能够触发鼠标事件(click、mouseenter等)。默认属性值为auto，表示元素可正常触发鼠标事件，常用属性值none，表示元素及其后代元素都不会触发鼠标事件，如果存在比该元素层级低的元素，且位置位于该元素下方，则鼠标点击事件(click)会透过该元素直接触发下面元素的鼠标点击事件。

  <style>
    .d1 {
      position: relative;
      width: 200px;
      height: 200px;
      border: 1px solid red;
    }
    .d2 {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 200px;
      height: 100px;
      background: blue;
      opacity: 0.5;
      pointer-events: none;
    }
    .d3 {
      width: 100px;
      height: 100px;
      background: yellow;
    }
    .d4 {
      width: 30px;
      height: 30px;
      background: red;
    }
  </style>
  
  <div class="d1">
    <div class="d2">
      <div class="d4">
        444
      </div>
    </div>
    <div class="d3">
    </div>
  </div>

<script>
    document.querySelector('.d1').addEventListener('click', function () {
      console.log('d1');
    });
    document.querySelector('.d2').addEventListener('click', function () {
      console.log('d2');
    });
    document.querySelector('.d3').addEventListener('click', function () {
      console.log('d3');
    });
    document.querySelector('.d4').addEventListener('click', function () {
      console.log('d4');
    });
  </script>

此时点击位于d3上面的d2，并不会触发d2的点击事件，而是会触发d3，冒泡触发d1:

该元素只能控制元素在捕获阶段不被触发，如果该元素的后代元素设置了pointer-events属性为auto，则在点击该元素的后代元素时，冒泡到该元素的事件是会被触发的：

// 。。。
.d4 {
   width: 30px;
   height: 30px;
   background: red;
   pointer-events: auto;
}
// 。。。

给d4设置pointer-events: auto;，然后点击d4，会接连冒泡到d2和d1，触发对应事件：

该属性的一个常用场景：页面弹幕，页面上虽然展示弹幕，但并不影响点击页面上的元素，触发功能。

除此之外该属性还有： visible、visibleFill、painted等只适用于SVG元素的属性，详细内容可查看: pointer-events 。

4、:global 定义全局样式

在 Vue.js 的单文件组件（.vue文件）中，我们通常使用<style scoped>来为当前组件添加样式，这样样式就只会作用于当前组件，不会影响其他组件。这实际上是通过给每个元素添加一个独特的属性（如data-v-f3f3eg9），然后在样式中使用这个属性来选择元素，实现样式的局部作用。
有时我们可能需要在这个样式块中添加一些全局样式。我们首先可以使用::v-deep或者>>>等方式来进行深度选择，不过这只能作用于当前组件内的子组件、子元素。而且无法影响同级或者上级组件、元素。如果我们需要真正的全局样式，那么我们需要使用:global标记。
:global 是 CSS 模块（CSS Modules）的一个特性，它允许你在模块化 CSS 中编写全局样式。在 CSS 模块中，所有的类名默认都是局部作用域的，也就是说它们只在当前 CSS 文件中有效。但在需要设置一些全局样式，这时就可以使用 :global特性。
在单文件组件（.vue文件）的 <style>标签中加入 scoped 属性， Vue 就会把这个样式块视为模块化 CSS。如果没有 scoped，那么所有的样式都会默认为全局样式，:global 就没有意义了。

在文件A.vue中:

<style lang="scss" scoped>
// 定义全局类名 其样式也变为全局样式
:global(.global-class) {
  color: red;
}
// 定义一个普通的局部样式 
.normal-class {
	// 使用 !important 提升优先级
	color: yellow!important;
}
</style>

在文件B.vue中:

<!-- 类名 normal-class 位于后面  优先级更高 -->
<h1 class="global-class normal-class">测试:global全局样式</h1>

页面表现：

元素只受到全局样式.global-class的影响：

三、JavaScript相关

1、标签的 onload() 和 onerror() 事件

① 介绍

HTML标签中支持onload() 和 onerror()事件的标签不多，常见的有body、link、script、frame、iframe、img等，除此之外 window 对象也支持这两个事件。

② img 标签

以img标签为例，这俩事件的触发，主要取决于src属性，当给定的 URL 地址存在且图片加载完成，则触发onload事件。当给定的图片 URL 地址不存在或网络出错时，则触发onerror事件，整体分为下面几种情况：

• 当src地址正确，且图片加载完成时，触发onload()事件。
• 当src地址不正确时，触发onerror事件，且控制台出现报错信息。
• 当src为空时，触发onerror事件，但控制台不会出现报错信息。
• 当未设置src时，onload()事件和onerror事件都不会触发，并且控制台也无报错信息。
  所以当图片加载出错时，我们可以通过onerror事件来做错误处理等操作，也可以通过onload()事件来结束图片的加载动画等操作。

③ 执行顺序

img标签的onload()事件和 onerror事件、document 的ready状态（DOMContentLoaded）以及window的onload()事件的执行顺序是：

1. img的onload()事件（情况一：加载成功、图片小、网速较快的情况）
2. document ready 状态（DOMContentLoaded）
3. img的onload()事件（情况二：加载成功、图片大、网速较慢的情况）
4. img的onerror()事件（情况三：加载失败的情况）
5. window的onload()事件
   这其中最值得注意的一点就是 img的onload()事件的执行时间，会受到图片本身的大小以及网速快慢的影响，可能会在document ready 状态之前执行，也有可能在document ready 状态之后执行。