CSSは素晴らしい言語であり、非常に大きな効果を再生することがその機能の多くは無関係な、いくつかのjsに仕事の一定量を達成しているように見える、CSSプロパティ解決しやすくすることができ、のが見てみましょういくつかの例（主に関連するイベントとJS）。
そのうちの多くは効果を達成するために、出て来て、オープン脳の穴が驚くべき偶然であります
オリジナルの問題
イベントが無効になっています
イベントで無効jsが複雑ではありませんが、ビジネスロジックに影響を与えることは容易です
function buy(){
if(XX){
return false;
}
//其他业务代码
}
复制代码もちろん、要素は適切なスタイルを設定する必要があり、それがクリックできないに見えます。
CSS無効イベント比較的簡単で、主に二つの方法があります
1.無効
ネイティブのフォーム要素のような、プロパティのデフォルトでは無効になっています
<button disabled onclick="alert(11)">按钮</button>
复制代码図から分かるように、障害者のためのデフォルトのスタイル
button:disabled {
color: graytext;
}
复制代码だから、ここでは無効のスタイルを変更するのは自由です
button:disabled {
color: red;
}
button[disabled] {/**属性选择器也行**/
color: red;
}
button:hover { /**:hover支持**/
color: red;
}
button:active,button:focus{/**不支持，其实也好理解，会触发focus()事件，所以也禁用了**/
color:red
}
复制代码通常の状況下では、このアプローチの使用は比較的良好な、自然な無効な特性である、互換性は悪いことではありません
2.ポインタイベント：なし
このプロパティは不慣れであってはならない、最も一般的な使用方法は、ボタンを無効にすることですが、フォーム要素に限定されるものではなく、任意の要素があることができ（例えば、多くの人々がラベルを使用したいです）
button.disabled {
pointer-events:none;
user-select:none;/*去除选中效果*/
color: graytext;
}
复制代码多くの、多くのJSの脳は、ここで財産ラインで直接解決する方法開始されていない、オンラインチュートリアルの多くをフィルタリングするために、このプロパティは便利です。
ペンを参照してください。 CSS禁用事件を XboxYan（で @xboxyan 上） CodePen 。プレスイベント
ネイティブJS、通常、開発者は、一般的に完了するために、タイマーを使用して、アイデアに続く、イベントを押しませんでした
以下は、擬似コードであります
el.onmousedown = function(){
this.timer && clearTimeout(this.timer);
this.timer = settimeout(function(){
//业务代码
},350)
}
el.onmouseup = function(){
this.timer && clearTimeout(this.timer);
}
复制代码もちろん、あなたが完了するために、CSSを使用することができ、より良い、簡単に制御します
なぜここだけの機能の一部を使用し、我々が完了するために、完全にCSSできないため、「と」であると言われ
次のように対応するコールバックイベントに新しいプロパティでCSS3トランジションやアニメーションは、また、これらのアニメーションを前提としています
| イベント | 説明 |
|---|---|
transitionstart |
移行の開始時にトリガ |
transitionrun |
移行時にトリガされると |
transitioncancel |
移行がキャンセル火災 |
transitionend |
遷移トリガが完了すると |
animationstart |
トリガされたときにアニメーション開始 |
animationiteration |
アニメーションがサイクルを完了したときに発生 |
animationend |
アニメーションが完了したときに発生 |
animationcancel |
アニメーションがキャンセル火災 |
互換性は、詳細に学ぶことができます興味を持っているいくつかのイベントを発行します
これらのイベントでは、長押しイベントはアイデアの2つのすべての種類があり、ここで、非常に簡単であるか、我々は脳洞で見ることができます
あなたは1秒の遅延するとします。
- 遷移時間は1秒、コールに設定されています
transitionendか、animationend - 遅延1S、呼び出します
transitionstartかanimationstart
ここでは最初のケースでtransitionend達成する（移行は、優先的に移行して、コードの少ない、映画よりも達成するためにはるかに簡単です）
button:hover:active{
opacity:.99;/**随便选取一个不影响页面的可以过渡的样式**/
transition:opacity 1s;
}
复制代码適切な、JSはに耳を傾ける必要があるtransitionendタイマーの助けを借りずに、イベント（個人の少し軽蔑は、タイマーを考え^）
el.addEventListener('transitionend',function(){
//业务代码
})
复制代码、合理化されていないことの多くは、CSSによって直接制御することができ、長い時間を変更する必要があります
（コード自体が非常に小さいですが）ここで少し、パッケージカスタムイベント、プロジェクトに良く使用することができます。
シングルクリックイベント
でjquery真ん中があるonce（このような）メソッドは、バインディングはもはや効果的な後1回クリックし、1回限りのイベントを表します。
ネイティブJSが、これは複雑ではない達成、通常の練習は、ロゴ、次の擬似コードをクリックした後の変化を定義することです
el.onclick = function(){
if(!this.once){
//业务代码
this.once = true;
}
}
复制代码上記のアイデアを、CSSはまた、次の二つの方法をまとめ、何かの下に取得するには、同様の効果を得ることができます
1.animationend
animationendアニメーションがトリガされた後、我々がここに大騒ぎを作ることができることは明らかです
例えば、我々は初期状態でサスペンド状態を与えることができますanimation-play-state:pausedクリックした、動き、animation-play-state:running状態は最後に残った後、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聞きます
el.addEventListener('animationend',function(){
//业务代码
})
复制代码2.純粋なCSSを達成
私が起こる無効アニメーション要素の最後に、上記の例で発見した場合、私は知らないのですか？
@keyframes once {
to{
opacity:.8;
pointer-events:none;
user-select:none;
}
}
复制代码<button class="button" onclick="fn()">按钮</button>
复制代码これが終わっ動きを無効にすることができ、完璧のようですか？
実際には、我々はすべて知っているように、ここでそれは、時間の動きを制御することは困難であり、onclick実際には、プレスが含まれており、リフトが遅すぎる場合は、二つのプロセスを持ち上げ、その後、時間の要素が無効にされている、イベントをトリガすることはできません。リフトであれば迅速なクリックが、移動が完了していないので、場合、あまりにも速いので、それは複数のイベントをトリガします。
ソリューションを使用することも非常に簡単であるonmousedownとの代わりに
<button class="button" onmousedown="fn()">按钮</button>
复制代码さらにonResizeイベント
我々は、すべてのことを知っwindowているonresize、あなたは、リアルタイムのウィンドウサイズを取得することができ、そしてその性質にウィンドウがストレッチすると、イベントがトリガされます。
window.onresize = function(ev){
//业务代码
}
复制代码しかしなど、一般的な要素ではなく、このリスナー、
div.onresize = function(ev){
//不生效...
}
复制代码なぜ我々は、この機能が必要なのでしょうか？
あなたは、このような性質があると知っているかもしれませんが、あなたはサイズを変更し、ネイティブの要素を伸ばすことができます
.box{
overflow: hidden;/**需要配合overflow才能生效**/
resize: both;
}
复制代码1つの属性のみ、引張要素（多少の傷が）達成することができ、計算され多くのJSを必要としません。
幸いなことに、視覚的な表示が、あなたはそれの本当のサイズの要素を行う方法を知っておく必要がある場合は、jsは通常2つのアイデアです
1.れるonmousemoveイベント
時間のストレッチは、あなたがに要素を追加することができますので、ホールドがダウンしてあると思うし、完了するために、マウスをドラッグすることは非常に自然であるonmouse-*一連のイベント、念頭に置いてマウスがキャンセルに耳を傾ける引き上げ
//大概是这样的逻辑
div.onmousedown = function(){
div.onmousemove = fn;//监听
div.onmouseup = function(){
div.onmousemove = null;
}
}
复制代码2.タイマー
とsetIntervalやrequestAnimFrameモニタリングを達成するために、またタイミングをキャンセルするために待機するように注意を払う必要があります
//大概是这样的逻辑
div.onmousedown = function(){
this.timer && clearInterval(this.timer)
this.timer = setInterval(fn,300);//监听
div.onmouseup = function(){
this.timer && clearInterval(this.timer)
}
}
复制代码もちろん、上記の方法は、特に慣れていない、問題は、多くの場合、キャンセルリスニング生じノンストップトリガにつながる、インパクトの経験ます。
このとき、それはターン演奏CSSで、JS私はすべての時間は、CSSのことを考えて再度認識できるで実装するために多くの時間が滑らかではないと思います。
だから、どのようにこのを聞くためにCSSを使用するには？
これは、2つのアイデアトランジションやアニメーションから考えることができます。
1. CSSトランジション
まず、我々は知ることができるであることであるresize: both時間の元素の変化ストレッチwidthやheight開発ツールから直接見ることができるように、
私たちは、合格する必要がありますtransitionrunかtransitionend聞くためにwidthとheight、これら二つの性質のトランジションを追加する必要があります
.box{
transition:width .3s,ehight .3s;//分别给width和height设置过渡，其他属性不需要
}
复制代码あなたがモニターを得ることができますが、移行には時間がかかりますので、このアプローチは、欠点を持っているので、そこにあるように、カトンの気持ちに従うことではありません。
だから我々は、第二の方法を見て
2. animationiteration
css設定した場合は、アニメーションの再生を設定することができますanimation-iteration-count: infinite無限のカルーセルを表現するために、animationiterationコールバックがまだ聞いていない達成することができます
.box:active{
animation: resize .3s infinite forwards;
}
@keyframes resize{
to {
opacity: .99;/**用一个无关紧要的属性来触发动画**/
}
}
复制代码JSリスナーが問題を解決することができます、非常に簡単です、また何かをキャンセルするために聞くために必要なもの、これらはCSSで行われています
el.addEventListener('animationiteration',function(){
//业务代码
})
复制代码ここでは完全なアニメーションが一度各コールバックに一度なので、上記されているような、アニメーションを設定することにより、モニタの周波数を制御するために成長することができます.3sトリガ周波数。
ここでデモを書いて、カスタム実装できるonresizeイベントを
セクション
上記のCSSを用いて、jsのは非常に困難な問題の数を達成するため、複数のアプリケーション・シナリオがあるかもしれない、ジュニアパートナーの歓迎メッセージ議論を〜