jq阻止事件冒泡,模擬下拉列表


事件冒泡

如果父元素都事件,子元素也有事件,在點擊子元素時候,父元素的也會執行,用冒泡阻止

注意:

1.可以用return false代替e.stopPropagation,e.preventDefault

2.下拉列表記得給要替換的元素放個標簽,不然,容易出現只能下拉一次現象

2.事件類型

  

e.type
e.target
e.pageX //鼠標相對於頁面的坐標
e.pageY
e.which //獲取鼠標的左右中鍵,鍵盤事件的按鍵 e.target.id
//獲取id e.target.textContent//獲取內容 e.target.value//獲取value e.preventDefault(); //阻止默認事件 e.stopPropagation(); //阻止冒泡事件

模擬下拉列表

 
         
<div class="moni">
<span>請選擇</span> //記得加個標簽
<ul class='seList'>
<li><a href="http://www.jb51.net/article/52307.htm">蘋果</a></li>
<li><a href="http://www.jb51.net/article/52307.htm">現在</a></li>
<li><a href="http://www.jb51.net/article/52307.htm">例子</a></li>
</ul>
</div>

//
注意阻止事件冒泡     $('.moni').click(function(){ $('.selList').css("display","block")
  e.stopPropagation(); alert(
"ss") }) $('.selList li').click(function(e){ $('.selList').css("display","none") $('.moni span').text($(this).text()) e.stopPropagation(); //注意阻止事件冒泡 })

html

<div id="content">
    外層div元素<br>
    <span>內層div元素</span><br>
    外層div元素2
    <div class="search">請選擇
        <ul>
            <li><a href="http://www.jb51.net/article/52307.htm">蘋果</a></li>
            <li><a href="http://www.jb51.net/article/52307.htm">現在</a></li>
            <li><a href="http://www.jb51.net/article/52307.htm">例子</a></li>
        </ul>
    </div>

</div>
<div id="msg"></div>

jq

        // 為span元素綁定click事件
        $('span').bind("click",function(e){
            var txt = $('#msg').html() + "<p>內層span元素被點擊.<p/>";//獲取html信息
            $('#msg').html(txt);// 設置html信息
            e.stopPropagation()
        });
        // 為div元素綁定click事件
        $('#content').bind("click",function(e){
            var txt = $('#msg').html() + "<p>外層div元素被點擊.<p/>";
            $('#msg').html(txt);
            e.stopPropagation()

        });
        $('.search').click(function(e){
            $('ul').css('display','block')
            e.stopPropagation()

        })
        $('ul li').click(function(e){
            $('ul').css('display','none')
            $('.search').html($(this).text())
//            e.stopPropagation()
//            e.preventDefault()
            //事件類型
            console.log(e.type)
            console.log(e.target)
            console.log('當前位置'+ e.pageX+','+e.pageY)
            //可以用return false替換阻止事件默認和事件冒泡,
            return false

        })

//獲取鼠標的鍵 1=左鍵 2=中鍵 3=右鍵
$('span').click(function(e){
console.log(e.which)
})
//獲取鍵盤按鍵
$('input').keyup(function(e){
console.log(e.which)
})
 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM