和js的相應函數一致,jquery中若響應函數若返回false,可以取消指定元素的默認行為,比如submit的提交,和a的超鏈接的跳轉,一個方法中只要有ruturn方法就會結束,不在往下執行,return的目的是讓submit等默認的行為失效,也就是說return true也會使方法停止方法不在往下執行,但默認行為不會失效,要想失效只能return false。
事件冒泡:事件會根據 dom的層次結構像水泡一樣不斷從下到頂端
解決方式:處理函數中返回false,會對事件停止冒泡,而且還停止了元素的默認行為
內層span
$(function(){
$("body").click(function(){alert("bodyclick");})
})
$("#content").click(function(){alert("dicClick");})
})
$("span").click(function(){alert("span click");
})
如果我們點擊body,會輸出body click
如果點擊div,會輸出 body click div click
如果點擊span,會輸出body click div click span click
之所以出現這種原因就是因為span在div內,div在body內,所以點擊span就相當於點擊div,點擊div就相當於點擊body,所以點擊span會出發三個事件機制,這既是事件冒泡,要想防止這種情況出現,需要在每個函數的最後添加return false就可以防止冒泡了
對然return false可以解決這個問題,但是兼容性不是很強,那麼如何才能提高兼容性呢?
可以使用e。stopPrppagation(),e為事件對象
具體用法為:$(function(){
$("body").click(function(){alert("bodyclick");})
$("#content").click(function(e){alert("dicClick");e。stopPrppagation();})
$("span").click(function(e){alert("span click");e。stopPrppagation()})
})
e。stopPrppagation()為阻止事件冒泡,但是沒有取消事件的默認行為,要想阻止事件的默認行為,還可以在調用事件對象的preventDefault()方法
事件對象
jquery中獲取事件觸發光標的x,y座標是通過 事件對象.pageX, 事件對象.pageY的方式獲取,這個和js中是有區別的,要注意,事件對象.target可以獲得觸發事件的元素(最根級的觸發元素,冒泡的起始),事件對象.target和this不是一個東西
假如上面是頁面結構,給tr,td還有p都添加了onclick事件,
點擊tr target是p this是tr
點擊td targer是p this是td
點擊p target是p this是p
p就是最根級的元素,所以無論點擊哪一個target都是p,而this就是點擊哪一個就是哪一個,這要區分
當觸發事件時,事件對象就會被創建,體現到程序中就是使用事件只需為函數添加一個參數,這參數就是對象
比如:獲取事件的x,y
$(function(){
$("body").onmouseover(function(event){
alert(event.pageX+event.pageY);
}
)
})
這裡就是通過在方法中寫上一個參數event,而這個參數就是事件對象了
事件對象還有屬性
which屬性:如果是鼠標事件則獲得按鍵(1左鍵,2中鍵,3右鍵)
altkey,shiftkey,ctrlkey屬性獲得alt,shift,ctrl是否按下為bool值
keyCode(鍵盤的,小鍵盤和主鍵盤的keycode不一樣)
charcode(Asc碼)
以前通過js的方式寫過圖片跟著鼠標走,下面寫一個jquery的方式實現,圖片跟著鼠標走
閱讀更多 幻風的編程日記 的文章