DOMイベント伝播(バブリング)の順番は、孫 → 子 → 親。
つまり内側から外側へ、伝播される

外側のイベント発生時に、内側へイベントを発生させるには、
Vue.js などのJavaScript を使わないとできないのでは？

1. 外側(親)の要素がイベントをキャッチする
2. 内側(子)の要素へイベントを投入すると同時に、自分(親)のイベントを消化する