事件冒泡
如果父元素都事件,子元素也有事件,在點擊子元素時候,父元素的也會執行,用冒泡阻止
注意:
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)
})