每周分享第 3 期收藏夹“瘦身”： 👇 内容速览 👇 如何在Scss中书写媒体查询响应mousedown而不是cl

每周分享会系统梳理过去一周我看的的值得记录和分享的技术、工具、文章/段子，致力于为收藏夹“瘦身”！

👇 内容速览 👇

如何在Scss中书写媒体查询
响应mousedown而不是click
stopImmediatePropagation与stopPropagation
VueJS源码解析教程
…

技术

1、Scss中@media的推荐写法

在theme-ad主题中，针对媒体查询采用了这种写法，下面是一个简单的demo：

.demo {
    $moblie-width: 768px !default;
    
    // 移动端样式
    @media screen and (max-width: $moblie-width) {
        padding: 0 20px;
    } 
    
    // PC端样式
    @media screen and (min-width: $moblie-width + 1) {
        padding: 0 30px;
    } 
}

2、onMouseDown下的不丢失光标应用

这个需求是因为在开发富文本组件时候，上方有一个功能栏，用户在打字输入内容时候，如果想进行切换字号等操作需要点击功能栏按钮。

为了让光标不丢失，用户体验更流畅，需要响应mousedown事件，而不是click事件。做法也很简单，使用event.preventDefault()禁止默认行为即可。

3、stopImmediatePropagation和stopPropagation的区别

stopPropagation：阻止传递
stopImmediatePropagation：阻止传递 + 当前元素剩下的同类事件的监听函数不执行

下面是一个简单的demo：

const p = document.querySelector('p')

// 会执行
p.addEventListener('click', event => {
  console.log('可以执行 1 ')
}, false)

// 会执行
p.addEventListener('click', event => {
  console.log('可以执行 2')
  event.stopImmediatePropagation()
}, false)

// 不会执行
p.addEventListener('click', event => {
  p.style.background = '#f00'
}, false)

4、react-router路由跳转的3种方法

在项目的组件中，我常用的方法是：