莫斯科没有眼泪

莫斯科没有眼泪 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

莫斯科没有眼泪 赞了文章 · 1月22日

从一次报错聊聊 Point 事件

同步自我的博客,欢迎交流

这篇文章在草稿箱里躺了很久,因为最近又遇到了相关问题,于是又整理了一下。请注意这里讲的不是 csspointer-events

起因

从某个月黑风高的晚上开始,有人发现我们的 web-app 在 Chrome 模拟器里开始出现报错,报错信息大概就是下面这样。

VM1023:1 Uncaught TypeError: Cannot read property '0' of undefined

但是只有他的浏览器有问题,而且对功能毫无影响,本着在我的机器上不复现的精神(好吧,当时比较忙),这个问题的优先级排的不高,但是后面一段时间慢慢有人也出现相同的问题,于是我开始在意这个问题了。

定位问题

根据调用栈很快定位到了代码,源码定位到之前一位同事写的组件代码,大概是这样的:

dom.on('touchstart  pointerdown', function (event) {
        /*部分业务代码*/
        
        var touch = event.touches[0]; //报错的地方
        
        /*部分业务代码*/
})

debug 发现是触发了 pointdown 事件,因为 event 没有 touches 这个字段,导致抛出异常。但是之前用的好好的呀,难道是浏览器的 API 变化了?而且我也没有了解过 pointerdown 事件,这个事件是用来处理什么的呢?于是我带着两个问题开启了搜索之旅:

  1. 什么是 pointerdown 事件

  2. 为什么突然开始爆发错误

聊聊 pointer events

查问题,最简单的问题就是搂一遍 W3C 的官方文档了。这里简单说下我的理解。

设备输入形式的多样化

在 PC 时代,我们通过鼠标与屏幕交互,这时候,我们设计系统时只需要考虑鼠标事件就好了。但是如今,有很多新的设备,比如智能手机,平板电脑,他们包含了其他的输入方式,比如触摸,手写笔,官方也为这些输入形式都提供了新的事件。

但是对于开发者来说,这是件很麻烦的事,因为这意味着你需要为你的网页适配各种事件,比如你要根据用户的移动来画图,你需要兼容 PC 和手机,你的代码可能就会是下面这样

dom.addEventListener('mousemove',
  draw);
dom.addEventListener('touchmove',
  draw);

如果需要兼容更多的输入设备呢?比如手写笔,这样的话代码就会很复杂。而且,为了兼容现有的基于鼠标事件的代码,很多浏览器都会为所有的输入类型触发鼠标事件(例如在 touchmove 时触发 mousemove,我在 Chrome 试验了一下不会触发,但是因为没有设备,手写笔的情况没有试),这也会导致无法确认是否真的是鼠标触发的事件。

如何兼容多种输入形式

为了解决这一系列的问题,W3C 定义了一种新的输入形式,即 pointer。任何由鼠标、触摸、手写笔或者其他输入设备在屏幕上触发的接触,都算是 pointer 事件。

它的 API 和鼠标事件很像,非常容易迁移。除了提供鼠标事件常用的属性,比如 clientXtarget 等等,还提供了一些用于其他输入设备的属性,比如压力,接触面,倾斜角度等等,这样开发者就可以利用 pointer 事件为所有的输入设备开发自己的功能了!

提供的属性

pointer 事件提供了一些特有的事件属性

  • pointerId:当前指针事件的唯一标识,主要是在多点触控时标识唯一的一个输入源

  • width:接触面的宽度

  • height:接触面的高度

  • pressure:接触的压力值,范围是0-1,对于不支持压力的硬件,比如鼠标,按压时该值必须为 0.5,否则为 0

  • tiltX,titltY:手写笔的角度

  • pointerType:事件类型,目前有 mousepentouch,如果是无法探测的指针类型,则该值为空字符串

  • isPrimary:用于标识是否是主指针,主要是在多点触控中生效,开发者也可以通过忽略非主指针的指针事件来实现单点触控。
    如何确定主指针:

    • 鼠标输入:一定是主指针

    • 触摸输入:如果 pointerdown 触发时没有其他激活的触摸事件,isPrimarytrue

    • 手写笔输入:与触摸事件类似,pointerdown 触发时没有其他激活的 pointer 事件

相关事件

事件名称作用
pointerovermouseover 行为一致
pointerentermouseenter 行为一致
pointerdown指针进入活动状态,比如触摸了屏幕,类似于 touchstart
pointermove指针进行了移动
pointerup指针取消活动状态,比如手指离开了屏幕,类似于 touchend
pointercancel类似于 touchcancel
pointerout指针离开元素边缘或者离开屏幕,类似于 mouseout
pointerleave类似于 mouseleave
gotpointercapture元素捕获到指针事件时触发
lostpointercapture指针被释放时触发

可以看到,pointer 事件与已知的事件类型基本一致,但是有一点区别:在触摸屏上,我们可能会滑动屏幕来触发页面滚动,缩放或者刷新,对于 touch 事件,这时会触发 touchmove,但是对于 pointer 事件,当触发这些浏览器行为时,你却会接收到 pointercancel 事件以便于通知你浏览器已经接管了你的指针事件。

如何检测

首先,pointer 事件的支持程度已经很不错了,你可以使用 Pointer Events polyfill来进行兼容,也可以自行检测

if (window.PointerEvent) {
    // 支持
} else {
  // 不支持
}

导致问题的原因

这时候,对于本文一开始提到的问题就显而易见了,因为 point events 是没有 touches 这个属性的。那么我们还有两个问题。

为什么之前会用到 point events

后来我看了下 zepto 的源码,在事件处理时是考虑到了 point event 的,同事之前写的代码大概是参考了 zepto 的事件系统。

为什么会突然爆发这个问题?

很简答,Chrome 55 开始支持这个 API,Chrome 具体的支持信息可以参考官方日志,至于怎么检测浏览器支持,可以参考上面的内容

总结

  1. 对于开发来说,一定要钻进去,任何 bug 都是有原因的

  2. 代码报错应该有相应的监控机制,让机器来帮我们发现问题,而不是靠人工去干预

参考
https://www.w3.org/Submission...
https://developers.google.com...

查看原文

赞 2 收藏 6 评论 2

莫斯科没有眼泪 发布了文章 · 1月7日

css 居中方式总结(包看包会)

css 居中方式(包看包会)

<div>
<div><div>
</div>

1、水平居中

方式一(推荐)

div:nth-of-type(1){
width: 100px;
height: 100px;
border: 1px solid black;
}
div:nth-of-type(1)>div{
margin: 0 auto;
width:50px;
height: 40px;
border: 1px solid black;
}

方式二:子元素设置为display:inline-block(不推荐)

div:nth-of-type(1){
width: 100px;
height: 100px;
border: 1px solid black;
text-align: center;
}
div:nth-of-type(1)>div{
display: inline-block;
width:50px;
height: 40px;
border: 1px solid black;
}

方式三 利用绝对定位,父亲设置相对定位,左右为设置为0

div:nth-of-type(1){
position: relative;
width: 100px;
height: 100px;
border: 1px solid black;
text-align: center;
}
div:nth-of-type(1)>div{
position: absolute;
left:0;
right: 0;
margin: auto;
width:50px;
height: 40px;
border: 1px solid black;
}

方式四 利用flex布局来实现

div:nth-of-type(1){
display: flex;
flex-direction: row;
justify-content: center;
width: 100px;
height: 100px;
border: 1px solid black;
text-align: center;
}
div:nth-of-type(1)>div{
width:50px;
height: 40px;
border: 1px solid black;
}

2、垂直居中

方式一 利用绝对定位

div:nth-of-type(1){
position: relative;
width: 100px;
height: 100px;
border: 1px solid black;
text-align: center;
}
div:nth-of-type(1)>div{
position: absolute;
top:0;
bottom:0;
margin:auto;
width:50px;
height: 40px;
border: 1px solid black;
}

方式二 利用flex布局来实现

div:nth-of-type(1){
display: flex;
align-items: center;
width: 100px;
height: 100px;
border: 1px solid black;
text-align: center;
}
div:nth-of-type(1)>div{

width:50px;
height: 40px;
border: 1px solid black;
}

3 水平加垂直居中

1、对内容进行居中

text-align:center

利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,

line-height:200px #这里的200px为行的高度。自然内容就可以居中

2、使用display:flex 布局

div:nth-of-type(1){

    display: flex;
    flex-direction: row;
    justify-content: center;
      align-items: center;
    }

3、使用定位position 来居中

方式一(不推荐)

div:nth-of-type(1){

    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid black;
}
div:nth-of-type(1)>div{
    position: absolute;
    top:50%;
    left:50%;
    margin-top:-20px;
    margin-left: -25px;
    width:50px;
    height: 40px;
    border: 1px solid black;
}
方式二(推荐)
div:nth-of-type(1){


    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

div:nth-of-type(1)>div{
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom:0;
    margin:auto;
    width:50px;
    height: 40px;
    border: 1px solid black;
}
查看原文

赞 0 收藏 0 评论 0

莫斯科没有眼泪 发布了文章 · 1月7日

photoshop 贴图+切图(包看包会)

PS 局部教程 (包看包会)

1、裁切图片

方式一 、选择截图工具,截图想要的图片,按两下鼠标左键直接保存即可

image

方式二、截取自己想要的尺寸,非常之舒服

image

image

点击确定后,按住Ctrl + T 选中该图片,可以旋转,可以缩放我们可以截取指定大小并且重要部位的图片

技巧:按住Alt向中间缩图片

2、利用蒙板给图片贴图

1、直接鼠标把图拖入ps里面(直接拖)

image

2、适当的调节不透明度,和移动该图片的位置,点击如下按钮,为新来的图片添加一个蒙版。
image

3、通过Ctrl + T 对图片进行放大缩小,通过移动工具任意的系统,通过橡皮擦工具对新来图片不需要的部分进行檫除。如图所示

image

3、如何正确的去校色

1、首先我们选择如图所示的一个小按钮,里面有很多选项比如下图,我们可以更加曲线来对图片的色彩进行校色

4、ps切图(不会可以去吃屎)

1、傻瓜式切图(傻瓜推荐)

选择你需要切取的图层,右键
image

选择 转化为智能对象

image

然后继续右键,选择 栅格化图层

image
接着继续右键 点击编辑内容

image-20210107135832103

接着按住 Ctrl + shift +alt +s 保存 即或的想要的图片

2、高手切图(成功人士须掌握)

打开 编辑--->首选项--->增效工具

image

选启用生成器--->点击确定

image

你会在该文件同级目录下多一个 改文件名+assets的文件夹

image

双击图层 修改后缀为图片格式如jpg,png 等

image

再次打开浏览器,就看到了,切出来的文件夹

image

查看原文

赞 0 收藏 0 评论 0

莫斯科没有眼泪 关注了专栏 · 1月7日

CodeGuide | 程序员编码指南

公众号:bugstack虫洞栈,回复:设计模式,可以下载《重学Java设计模式》PDF,全网下载量17万+ | 这是一本互联网真实案例实践书籍。以落地解决方案为核心,从实际业务中抽离出,交易、营销、秒杀、中间件、源码等22个真实场景,来学习设计模式的运用。

关注 15263

莫斯科没有眼泪 关注了专栏 · 1月7日

SegmentFault 行业快讯

第一时间为开发者提供行业相关的实时热点资讯

关注 58674

莫斯科没有眼泪 关注了专栏 · 1月7日

Python数据科学

微信公众号:Python数据科学

关注 7696

莫斯科没有眼泪 关注了专栏 · 1月7日

SegmentFault 社区运营

SegmentFault 思否社区管理官方专栏,在这里发布 SegmentFault 思否社区运营和管理相关的最新消息。

关注 18247

莫斯科没有眼泪 关注了专栏 · 1月7日

被代码虐

关注 3059

莫斯科没有眼泪 关注了用户 · 1月7日

铂赛东 @bosaidong_5c495684bcf4b

开源作者&内容创作者,专注于架构,开源,微服务,分布式等领域的技术研究和原创分享

欢迎关注公众号:「元人部落」,你能第一时间获取到我的原创内容

关注 6533

莫斯科没有眼泪 关注了用户 · 1月7日

野林 @vleedesigntheory

关注 3234

认证与成就

  • 获得 0 次点赞
  • 获得 0 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 0 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 1月7日
个人主页被 201 人浏览