摘要：是一門很神奇的語言，很多和它不相干的功能卻能起到很顯著的效果，有些在看起來實現都有一定的工作量，一句屬性就能輕而易舉的解決，下面來看幾個例子主要和事件相關。那么，如何借助來監(jiān)聽這些呢可以從過渡和動畫兩個思路來考慮。

CSS是一門很神奇的語言，很多和它不相干的功能卻能起到很顯著的效果，有些在js看起來實現都有一定的工作量，CSS一句屬性就能輕而易舉的解決，下面來看幾個例子（主要和js事件相關）。

原鏈接

https://notes.codelabo.cn/art...

原issues

https://github.com/XboxYan/no...

很多都是開腦洞想出來的，實現效果卻意外的驚人

在js中對事件禁用并不復雜，但是卻容易影響到業(yè)務邏輯

function buy(){
  if(XX){
    return false;
  }
  //其他業(yè)務代碼
}

當然，元素也要設置相應的樣式，讓它看起來不可點擊。

css對事件禁用就比較簡單了，主要有兩種方式

1. disabled

原生表單元素是有默認的禁用屬性的，比如

按鈕

可以看出，禁用的默認樣式為

button:disabled {
    color: graytext;
}

所以，在這里你可以隨意的修改禁用的樣式

button:disabled {
    color: red;
}
button[disabled] {/**屬性選擇器也行**/
    color: red;
}
button:hover { /**:hover支持**/
    color: red;
}
button:active,button:focus{/**不支持，其實也好理解，會觸發(fā)focus()事件，所以也禁用了**/
  color:red
}

一般情況下，使用這種方式是比較好的，天然的禁用屬性，兼容性也不錯

2. pointer-events:none

這個屬性應該也不陌生，最常見的用法就是禁用一個按鈕，而且不局限于表單元素，任意元素均可（比如很多人喜歡用的a標簽）

button.disabled {
    pointer-events:none;
    user-select:none;/*去除選中效果*/
    color: graytext;
}

這個屬性用處很多，很多js絞盡腦汁想要過濾掉的方法，直接就用一行屬性解決，這里就不展開了，網上教程很多。

查看這個demo

原生js中并沒有長按事件，通常開發(fā)者一般會順著思路，使用定時器來完成

下面是偽代碼

el.onmousedown = function(){
    this.timer && clearTimeout(this.timer);
    this.timer = settimeout(function(){
        //業(yè)務代碼
    },350)
}
el.onmouseup = function(){
    this.timer && clearTimeout(this.timer);
}

當然，可以借助css來完成，而且效果更好，易于控制

這里為什么說是“借助”呢，因為不能完全有css來完成，只是利用了某些特性

css3中新增了過渡和動畫屬性，與之相對應的也預設了這些動畫的回調事件，如下

有些事件存在兼容性問題，有興趣的可以詳細研究

有了這些事件，要做一個長按事件就很容易了，這里有兩種種思路，大家可以腦洞一下

假設需要延時1s；

過渡時間設置為1s，調用transitionend或者animationend

延時1s，調用transitionstart或者animationstart

這里以第一種情況transitionend（過渡比動畫實現要容易多，代碼也少，優(yōu)先用過渡）來實現

button:hover:active{
  opacity:.99;/**隨便選取一個不影響頁面的可以過渡的樣式**/
  transition:opacity 1s;
}

相應的，js需要監(jiān)聽transitionend事件，不需要借助定時器（個人有點鄙視定時器的思想^）

el.addEventListener("transitionend",function(){
    //業(yè)務代碼
})

是不是精簡很多呢，需要改長按時間可以直接通過css來控制

這里封裝了一下自定義事件，可以更好的在項目中使用（雖然代碼本身就很少了）。

查看這個demo

在jquery中有一個once（好像是這個）方法，表示綁定一次性事件，點擊一次后就不再生效。

原生js實現這個也不復雜，通常做法就是定義一個標識，點擊后改變一下，下面是偽代碼

el.onclick = function(){
   if(!this.once){
       //業(yè)務代碼
       this.once = true;
   }
}

借助上面的思路，css也可以實現類似的效果，深究了一番，總結以下兩個方法

1.animationend

animationend是動畫結束后觸發(fā)，顯然我們可以在這里做文章

比如我們可以在初始狀態(tài)給一個暫停狀態(tài)animation-play-state:paused，然后在點擊時運動animation-play-state:running，結束后一直保持在最后狀態(tài)animation-fill-mode: forwards

.button{
  animation: once .01s paused forwards;/**給一個足夠小的運動時間，確保能夠在`:active`時運動完成**/
}
.button:hover:active{
  animation-play-state:running;
}
@keyframes once {
  to{
    opacity:.8;
  }
}

js只需要對animationend進行監(jiān)聽

el.addEventListener("animationend",function(){
    //業(yè)務代碼
})

2.純css實現

不知道在上面的例子中有沒有發(fā)現，在動畫結束時把元素禁用會怎么樣？

@keyframes once {
  to{
    opacity:.8;
    pointer-events:none;
    user-select:none;
  }
}

按鈕

這樣就可以在運動完直接禁用，好像很完美？

事實上，這里運動的時間很難把控，大家都知道，onclick其實是包含按下和抬起兩個過程的，如果抬起的太慢，那么此時元素已經禁用了，觸發(fā)不了事件；如果抬起太快，如果快速點擊，由于還沒運動完成，會觸發(fā)多次事件。

解決方式也很簡單，用onmousedown代替即可

按鈕

查看這個demo

大家都知道window有個onresize事件，可以在窗口拉伸的時候觸發(fā)，然后就能實時獲取窗體的尺寸等等屬性。

window.onresize = function(ev){
   //業(yè)務代碼
}

但是，普通的元素卻沒有這個監(jiān)聽，比如

div.onresize = function(ev){
   //不生效...
}

為什么需要這個功能呢？

大家可能知道有這樣一個屬性，可以原生拉伸元素，改變尺寸

.box{
    overflow: hidden;/**需要配合overflow才能生效**/
    resize: both;
}

只需一個屬性，就可以實現元素的拉伸（雖然稍有瑕疵），不需要大量的js來計算。

視覺展示還好，但是如果需要實時知道元素的尺寸怎么辦呢，js通常有兩種思路

1. onmousemove事件

拉伸的時候很自然的想到是有鼠標按住然后拖拽完成，所以可以給元素添加onmouse-*一系列事件，同時要注意鼠標抬起要取消監(jiān)聽

//大概是這樣的邏輯
div.onmousedown = function(){
    div.onmousemove = fn;//監(jiān)聽
    div.onmouseup = function(){
        div.onmousemove = null;
    }
}

2. 定時器

借助setInterval或者requestAnimFrame來實現監(jiān)聽，同樣是需要注意取消監(jiān)聽的時機

//大概是這樣的邏輯
div.onmousedown = function(){
    this.timer && clearInterval(this.timer)
    this.timer = setInterval(fn,300);//監(jiān)聽
    div.onmouseup = function(){
        this.timer && clearInterval(this.timer)
    }
}

很顯然，上面的方法都不是特別的舒適，很多情況下都會出現監(jiān)聽取消的問題，導致不停的觸發(fā)，影響體驗。

這時候，又輪到css出場了，很多時候js覺得實現起來不順暢的時候都可以用css的思維來重新認識。

那么，如何借助css來監(jiān)聽這些呢？

可以從過渡和動畫兩個思路來考慮。

1. CSS過渡

首先，我們可以知道的是，在通過resize: both進行元素拉伸的時候，改變的是width和height，這一點可以從開發(fā)者工具直接看到

我們需要通過transitionrun或者transitionend來監(jiān)聽width和height，所以需要給這兩個屬性加上過渡

.box{
   transition:width .3s,ehight .3s;//分別給width和height設置過渡，其他屬性不需要
}

這樣就可以拿到監(jiān)聽了，不過這種方式有一個弊端，由于過渡需要時間，所以有一種不跟隨，卡頓的感覺。

所以我們來看第二種方式

2. animationiteration

css動畫可以設置播放次數，如果設置成animation-iteration-count: infinite就表示無限輪播，配合animationiteration回調，不就可以實現監(jiān)聽了么

.box:active{
    animation: resize .3s infinite forwards;
}

@keyframes resize{
    to {
       opacity: .99;/**用一個無關緊要的屬性來觸發(fā)動畫**/
    }
}

js很簡單，一個監(jiān)聽就能解決問題，也不需要什么取消監(jiān)聽什么，這些都已經在css完成了

el.addEventListener("animationiteration",function(){
    //業(yè)務代碼
})

這里是每個動畫完成一次就回調一次，所以我們可以通過設置動畫時長來控制監(jiān)聽的頻率，比如上面是.3s的觸發(fā)頻率。

下面寫了一個demo，可以實現自定義onresize事件

查看這個demo

以上通過借助css，實現了許多js都很棘手的問題，可能還會有更多的應用場景，歡迎小伙伴留言討論~

如果有新的想法，會第一時間更新在 https://github.com/XboxYan/no... ，多多關注