◆ jQuery でデリゲートでリスナ設定するときに セレクタにマッチする要素がイベントの伝播中に複数こないようにセレクタを書かないと余計にリスナ登録した関数が実行されてる
◆ Zepto は余計なことしない

やっぱり Zepto のほうが優れてる
やめてほしい jQuery の仕様です

jQuery とデリゲートの組み合わせの記事が多めな気がしまうすけど またデリゲートです
on の第二引数でセレクタを指定しますがそこにマッチする要素が複数あってネスト関係にあるときにおかしな動きをします

まずは サンプル

zepto と jQuery とただの JavaScript の 3 つが用意されていて それぞれ
ul>li>a
という構造です

li は 2 つあって 上側は li とその子要素の a が同じクラスで 下側は li と a のクラスが異なります
ul
li.link
a.link
(text)
li.link-li
a.link
(text)
こういうクラスです

この状態で a タグのクラス（link）を対象に on でリスナをつけます
普通 a タグがクリックされると 1 回リスナ登録した関数が実行されると思いますよね

ですが jQuery の場合は上側の link クラスが li と a にあると 2 回実行されます
a → li → ul
で伝播するクリックイベントが一回しか実際に起きていません
なので一回だけ起きるのが正しいのですが jQuery では デリゲートで設定されたセレクタにマッチする要素は a と li の両方なのでわざわざ 2 回に増やして a タグの分と li タグの分実行されます


サンプルのスクショです
links1 が zepto で links2 が jQuery で links3 が ただの JavaScript を表してます

delegate-nested-same-class01
「CCCCC」 の a タグをクリックすると 2 つ右下に要素が出現します


jQuery 互換の軽量ライブラリ Zepto ではそんな余計なことはせず普通に 1 イベントでは 1 つのリスナが実行されます
this はイベントが発生した a タグの方になります

delegate-nested-same-class02
「AAAAA」をクリックした時です



クラス名じゃなくても span とセレクタ指定して span がネストしてれば一緒なので セレクタにマッチする要素が親子関係に存在しないように注意して書かないといけないですね