stopPropagationメソッドの挙動について教えていただきたいです。

Question

railsにてjQueryのプルダウンを設置しようと以下のjsファイルを設置しました。

$(function(){
    $('li').on('click',function(e){
        $(this).children('ul').slideToggle();
        e.stopPropagation();
  });
});

この記述ですとli要素をクリックした時に発火すると思います。
liのリストはプルダウンの記述以外にもあり、意図しないところで誤作動が起きてしまいました。
li要素の中にはlink_toメソッドでaタグを生成している場所があり、

= link_to ~~_path(~~), method: :post

という形でpostにリンクを貼っていたのですが、前述したjQueryの記述が発火し
linkには飛ぶものの method: :postが無効化されてしまったようで、GETでしか飛べなくなってしまいました。

stopPropagationが悪さをしていると思うのですがどういう処理をしているのでしょうか？
調べてみても親要素への伝播を止める、という記述が多く、今回ですと親要素ではなくクリックしたその要素そのものの動きが止まっているようにしか見えないので質問させてもらいました。
よろしくお願い致します。

Answer 1

Railsでdata-methodを指定したリンクの挙動はjquery-ujsやrails-ujsが担っていますが、これらはdocumentにイベントを仕掛けています。

そのため、body > li > aとなっているような状況でliにe.stopPropagation()を仕掛けてしまうと、documentまでclickイベントが届かないので、リンク形式の変更ができなくなってしまいます。

Comments

[dongw]

コメントありがとうございます。
liにe.stopPropagation()を仕掛けてしまうとdocumentまでclickが届かないということはつまりどういうことでしょうか？勉強不足で申し訳ありません。

body > li > aの状況では、リンクをクリックしたら右から左への伝播がbodyに伝わる前に止まってしまうということでしょうか？
documentにイベントを仕掛けているということは
階層としてはdocument(HTML)>body > li > a　という感じであっているでしょうか？

[maisumakun]

はい、「イベントバブリング」といって、イベントが発生した際には当該の要素、その親要素、その親…と進んでいって、最終的にdocumentまでイベントが起こされます。stopPropagationは、この「親でイベントが発生する」のを止めるためのメソッドです。