zeptoを使ったon事件で出会った奇妙な問題.
4926 ワード
最近あるプロジェクトでzeptoのonイベントバインドを用いて、jqueryのイベントと大きな違いがあることがわかり、zeptoの問題かどうか分かりませんが、
HTML構造は以下の通り
次に、上記のtest 1とtest 2にイベントをバインドします.コードは次のとおりです.
このとき、aラベルをクリックします.理論的にはalert(「サブノードをクリックした」)をポップアップし、alert(親ノードをポップアップした)をポップアップすべきである.
しかし、実際には、zeptoのイベントでバインドするときは正反対で、まず親ノードをポップアップしてから、子ノードをポップアップして、jqueryのイベントでバインドして、すべて正常で、それからイベントのバインド順序を変えて、先に固定子ノードを縛ってから親ノードをバインドするのは正常であることが分かった.
これは最初に不合理な感じがした場所です.
一番穴のお父さんの2時が来た.
この時、もし私が事件の泡を止める必要があるならば、理論的には、泡を止める方法を加えるだけでいい.コードは次のとおりです.
この場合、jqueryでは確かに何の問題もないが、zeptoでは失効する.そこでソースコードを見るしかなく、コードは次のように発見されました.
そこで私は上の要求に従って修正しました.コードは次のとおりです.
まだだめだと気づいた.zeptoとJqueryには大きな違いがあるようですが、皆さんがこの問題に遭遇したかどうか、あるいはこの問題の根本的な原因を知っているかどうか分かりません.もちろん純粋にこの機能を実現するために以下のコードを使っても解決できます.
上のバインド方式はすべてzeptoの下で正常です.
なぜ最初のバインド方式がなぜだめなのか知りたいです.ご意見をお待ちしております
HTML構造は以下の通り
<div>
<ul id="test1">
<li><a id="test2">11111111</a></li>
</ul>
</div>
次に、上記のtest 1とtest 2にイベントをバインドします.コードは次のとおりです.
$(document).on("click","#test1",function(){
alert(" ")
});
$(document).on("click","#test2",function(){
alert(" ")
});
このとき、aラベルをクリックします.理論的にはalert(「サブノードをクリックした」)をポップアップし、alert(親ノードをポップアップした)をポップアップすべきである.
しかし、実際には、zeptoのイベントでバインドするときは正反対で、まず親ノードをポップアップしてから、子ノードをポップアップして、jqueryのイベントでバインドして、すべて正常で、それからイベントのバインド順序を変えて、先に固定子ノードを縛ってから親ノードをバインドするのは正常であることが分かった.
これは最初に不合理な感じがした場所です.
一番穴のお父さんの2時が来た.
この時、もし私が事件の泡を止める必要があるならば、理論的には、泡を止める方法を加えるだけでいい.コードは次のとおりです.
$(document).on("click","#test2",function(event){
alert(" ");
event.stopPropagation();
});
$(document).on("click","#test1",function(){
alert(" ")
});
この場合、jqueryでは確かに何の問題もないが、zeptoでは失効する.そこでソースコードを見るしかなく、コードは次のように発見されました.
handler.del = getDelegate && getDelegate(fn, event)
var callback = handler.del || fn
handler.proxy = function (e) {
var result = callback.apply(element, [e].concat(e.data))
// false ,
if (result === false) e.preventDefault(), e.stopPropagation()
return result
}
そこで私は上の要求に従って修正しました.コードは次のとおりです.
$(document).on("click","#test2",function(event){
alert(" ");
return false;
});
$(document).on("click","#test1",function(){
alert(" ")
});
まだだめだと気づいた.zeptoとJqueryには大きな違いがあるようですが、皆さんがこの問題に遭遇したかどうか、あるいはこの問題の根本的な原因を知っているかどうか分かりません.もちろん純粋にこの機能を実現するために以下のコードを使っても解決できます.
$("#test2").on("click",function(event){
alert(" ");
return false;
});
$("#test1").on("click",function(){
alert(" ")
});
上のバインド方式はすべてzeptoの下で正常です.
なぜ最初のバインド方式がなぜだめなのか知りたいです.ご意見をお待ちしております