あまり良くないことをしたのかもしれないです。
私は、既に組み込まれたイベントに対して、
Event.stopPropagation()を行いました。
stopPropagation()はEventインターフェイスのメソッドで、キャプチャおよびバブリング段階において現在のイベントのさらなる伝播を阻止します。引用：mozilla
簡単に子から親に向かってイベントを発生していきますが、
Event.stopPropagation()によって、イベントの伝搬を停止させます。
今回記述した理由は、サービス（既に組み込まれたプログラム）に対して
ユーザスクリプトとして入力する必要があったからです。
WordPressのような感じです。
既に組み込まれたプログラム（WordPress）にユーザで記述するといったやり方です。
例えば、組み込みで画面遷移してしまうボタンに対して、
画面遷移せず、ボタンを色付けするといった変更です。
無論、組み込まれたイベントに対して問題なくイベント伝搬を止められる思っていました。
実装例
私の場合、ライブラリはjQueryでしたので、jQuery感で雑に記しますと、
...
$(button).on("click",function(event){
event.stopPropagation();
$(this).css("backgroundColor","red");
});
...
実は、これならevent.stopPopagation()で
親要素や、他の要素のイベントを停止できます。
が、この記述方法ですと
動的要素に対しては適用できません。
何かしらのトリガーにより、ボタンの数が増えた場合、
増えたボタンをクリックすると、ボタンの色は変わらず遷移してしまいます。
このような動的要素の場合、イベントの記述方法を変える必要があります。
...
$(document).on("click",button,function(event){
event.stopPropagation();
$(this).css("backgroundColor","red");
});
...
すると、、、ボタンをクリックしても遷移してしまいます。
$(el).on(…と、$(document).on(….でイベントのターゲットが異なるのか？
とか、色々調査しましたがstopPropagationが使えない理由が見当たらないのです。
ときたま、同様のエラーで悩んでる記事はありましたが、解決に至っていなかったり。
諦めかけました。。。。
ですが、原因が分かりました。
処理の実行タイミングによる問題でした。
運がいいことに、私が悩んでいたサービス（組み込まれたプログラム)がオープンソースでした。そしてGitHub上で公開されており組み込まれたプログラムを見ることができました。
すると、私が伝搬したくないイベントは、jQuery(document)..で書かれてありました。
そうです。documentにすることによりイベントが、既存のプログラムより後に実行されてしまうことがわかりました。
$(function(){
//処理
});
jQuery(function(){
//処理
});
jQuery(document).ready(function(){
//処理
});
全く違う問題でしたね。
これは検索してもヒットしないわけです。。。
結局、event.stopPropagation()を使わない方向になりました。
運がいいことに画面遷移を防ぐクラスが用意されていたので
そのクラスを適用して、ボタンを遷移しない。一部遷移したい場合は、
独自スクリプトで追加する。といったように実装しました。
おわりに
組み込まれているプログラムに絡んで変更したい場合は、デバッグもし辛く、
簡単な問題でさえ、難しく感じました。
やり方は、あんまり良くはないと思いますし。。
サービスの方で用意された関数等があれば、それらを使用して
画面遷移を止めたり、該当のイベント実行前に実行するスクリプトや
実行後に実行するスクリプトなど柔軟に実装が可能です。
それは、サービスの充実さ次第ですが。
コメント