Preface

I met some bug with MS’s flex box.

Main

• min-height
  See code below:

<div class="par">
  <div class="child child1">child1</div>
  <div class="child child2">child2</div>
  <div class="child child3">child3</div>
</div>

* {
  margin: 0;
  padding: 0;
}
.par {
  background: #eee;
  width: 400px;
  min-height: 200px;
  display: flex;
  justify-content: center;
  flex-flow: column nowrap;
}
/* _:-ms-lang(x),
.par {
    height: 200px;
} */
.par .child {
  flex: 1 1 auto;
}
.child1 {
  background: pink;
}
.child2 {
  background: lightblue;
}
.child3 {
  background: yellowgreen;
}

I think the result is pretty clear. As the image below :

However, what I got in IE10 and Edge is like :

The problem is quite clear. Property flex doesn’t work in MS when there is only min-height. I think it is a bug so I just fix it by hack. And the hack is the comments in the code above.

• IE10 flex doesn’t work if flex item is inline element

For example:

* {
  margin: 0;
  padding: 0;
}

.box {
  display: flex;
  width: 500px;
  margin: 60px auto 0;
  justify-content: space-between;
  background: pink;
}

<div class="box">
  <a href="" class="box__link">box1</a>
  <a href="" class="box__link">box2</a>
  <a href="" class="box__link">box3</a>
</div>

Code above is quite clear. However, in IE10, you will see:

justify-content:space-between doesn’t work. If you add

.box__link {
  display: block;
}

It will work. See:

Preface

There has been a long time that I don’t know whether should I use frame like jQuery or still stick to pure js. So, I decided to summarize some principles for future reference.

Main

Before using

1. Figure out the problem that the frame solved?
2. Figure out what kind of situation the frame would be useful, similar with above.
3. Why would so many people use this not other similar frames?
4. How many parts in the frame?
5. What is the relationship between those parts?

When should use

• Needed in work.
• Emancipate the productive forces based on the fact that you can solve this with ease by pure js.

When shouldn’t use

• Don’t need in work and you don’t know how to implement it with pure js and use it just for laze.
• Need it in work and just use it without understanding the principle.

Recommendation

• You can implement it with pure js easily so that you want to use it to emancipate the productive forces.
• In need of other situation, you have to implement it immediately so you use it and figure out the principle as soon as possible in case of bugs.

Preface

When I am trying to delegate the error event of img, I find that those events won’t bubble up to window. So,does that mean I have to bind so many events as many as images I have?

Main

After a while, I think of something about event capturing which maybe can solve this question. So, I tried code below:

<img id="img" src="error.png" alt="error.png">

window.addEventListener('error', windowErrorCb, { capture: true }, true)
function windowErrorCb(event) {
  let target = event.target
  let isImg = target.tagName.toLowerCase() === 'img'
  if (isImg) {
    imgErrorCb()
    return
  }
  function imgErrorCb() {
    let isImgErrorHandled = target.hasAttribute('data-src-error')
    if (!isImgErrorHandled) {
      target.setAttribute('data-src-error', 'handled')
      target.src = 'backup.png'
    }
  }
}

Code above works normally. If we change the capture and the last argument to false, it doesn’t work.

In this case, we can find that event capturing seems have more applicable situations than event bubbling. Also it seems faster because I catch and handle the event earlier than event bubbling.
So, I got these questions:

• Why would we use event bubbling not event capturing as default except for compatibility?

• Does event capturing really faster than event bubbling as I thought?

• Does event capturing really have more applicable situations?

The answers can be listed below:

• Don’t know yet.

• Yes, you can see the demo here

• Yes.

Ending

After words above, I think we should use event capturing as default.

Reference

Event Capturing vs Event Bubbling

delegating-capture-vs-bubble