jQueryにおけるイベントオブジェクトeのイベントバブルの使い方例の紹介
3051 ワード
以前マニュアルを調べたとき、イベントオブジェクトという概念は見られませんでしたが、テキストボックスをクリックしてドロップダウンマルチ選択ボックスが表示され、テキストボックスでフォーカスを失うのはblurイベントをトリガーし、ドロップダウンボックスを隠すことです.しかし、私が複数の選択ボックスを選択すると、それを隠すことができて、選択することができなくて、これは私を憂鬱にさせます.一日の資料を調べて、やっと焦点から外れた.ネット上で事件の泡が立つものを見つけて、クリックすることで私のこの機能を実現することができることを発見しました.
e.stopPropagation()イベントの発泡を阻止
e.stopPropagation()イベントの発泡を阻止
<br/><script src="Scripts/jquery-1.4.1.js" type="text/javascript"/>
<br/>
<br/>
<br/><table>
<br/><tr>
<br/><td><span> </span></td>
<br/></tr>
<br/></table>
<br/>
<br/>
</code></pre>
<br/> ：
<br/>
<pre><code>
<br/><script type="text/javascript">
<br>$(function () {
<br>$("table").click(function () { alert("table alert"); });
<br>$("td").click(function () { alert("td alert"); });
<br>$("span").click(function (){
<br>alert("span alert");
<br>});
<br>});
<br></script>
<br/>
</code></pre>
<br/> ：span alert -> td alert -> table alert。 。 ， ， 。 ， ， 。
<br/>
<br/> ？
<br/>
<pre><code>
<br/><script type="text/javascript">
<br>$(function () {
<br>$("table").click(function () { alert("table alert"); });
<br>$("td").click(function () { alert("td alert"); });
<br>$("span").click(function (e){
<br>alert("span alert");
<br>e.stopPropagation();
<br>});
<br>});
<br></script>
<br/>
</code></pre>
<br/> document click ， ， document 。
<br/>
<br/> ， e ，e 。
<br/>
<br/>e.preventDefault() 。
<br/>
<pre><code>
<br/>$("a").click(function (e) {
<br/>alert(" ");
<br/>e.preventDefault();
<br/>});
<br/><a href="http://www.baidu.com"> </a>
<br/>
</code></pre>
<br/>return false e.preventDefault() e.stopPropagation()
<br/>
<br/>return false ， 。 jquery ， ：
<br/>
<pre><code>
<br/>if (ret===false){
<br/> event.preventDefault();
<br/> event.stopPropagation();
<br/>}
<br/>
</code></pre>
<div class="clearfix">
<span id="art_bot" class="jbTestPos"/>
</div>
</div>
</div>
</div>