jquery事件 【mousedown與mouseup,jquerymouseup
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <script src="Jquery/jquery-1.10.2.js" type="text/javascript"></script> <script type="text/javascript"> //<!--當【滑鼠按下】的時候觸發mousedown事件--> $(function () { // mousedown 滑鼠按下 $("#btn1").mousedown(function () { $("#btn1").val(parseInt($("#btn1").val()) + 1) }) }) //----------------------------------------------------------------- //<!--當【滑鼠彈起】的時候觸發mouseup事件--> $(function () { // mouseup 滑鼠彈起 $("#btn2").mouseup(function () { $("#btn2").val(parseInt($("#btn2").val()) + 1) }) }) //****************************************************************** //<!--當【鍵盤按下】的時候觸發keydown事件--> $(function () { // keydown 鍵盤按下 $("#btn3").keydown(function (e) { alert(e.keyCode); //在keydown事件下,keyCody就是當前按鍵的鍵盤碼 :列印當前按鍵的鍵盤碼 $("#btn3").val(parseInt($("#btn3").val()) + 1) }) }) //----------------------------------------------------------------- //<!--當【鍵盤按下】的時候觸發keypress事件--> $(function () { // keypress 鍵盤按下 $("#btn4").keypress(function (e) { alert(e.keyCode) //在keypress事件下,keyCody就是當前按鍵的ASCII碼 :列印當前按鍵的ASCII碼 $("#btn4").val(parseInt($("#btn4").val()) + 1); }) }) //<!-- KeyDown與keypress是按下一個鍵的意思, 但實際上二者的根本區別是, 系統由KeyDown返回鍵盤的代碼, 然後由TranslateMessage函數翻譯成成字元, 搜尋由KeyPress返回字元值. 因此在KeyDown中返回的是鍵盤的代碼。 //而KeyPress返回的是ASCII字元。KeyPress主要用來接收字母、數字等ASCII字元。KeyPress 只能捕獲單個字元,KeyPress 不區分小鍵盤和主鍵盤的數字字元。KeyPress 不顯示鍵盤的物理狀態(SHIFT鍵),而只是傳遞一個字元。KeyPress 將每個字元的大、小寫形式作為不同的鍵代碼解釋,即作為兩種不同的字元。 //而 KeyDown 和 KeyUP 事件程序可以處理任何不被 KeyPress 識別的擊鍵,諸如:功能鍵(F1-F12)、編輯按鍵、定位鍵以及任何這些鍵和鍵盤換檔鍵的組合等。所以根據你的目的, 如果只想讀取字元, 用KeyPress, 如果想讀各鍵的狀態, 用KeyDown。如果你一直按著鍵不放, 這時不斷地觸發KeyDown和KeyPress--> //KeyDown 和KeyUp 區分小鍵盤和主鍵盤的數字字元 //----------------------------------------------------------------- //<!--當【鍵盤彈起】的時候觸發keyup事件--> $(function () { // keyup 鍵盤彈起 $("#btn5").keyup(function () { $("#btn5").val(parseInt($("#btn5").val()) + 1) }) }) //****************************************************************** //<!--當選中控制項【獲得焦點】的時候--> $(function () { // focus 獲得焦點 $("#txt1").focus(function () { $("#txt1").val(parseInt($("#txt1").val()) + 1) }) }) //------------------------------------------------------------------ //<!--當選中控制項【失去焦點】的時候--> $(function () { // blur 失去焦點 $("#txt2").blur(function () { $("#txt2").val(parseInt($("#txt2").val()) - 1) }) }) //------------------------------------------------------------------ //<!--當元素的【值發生改變】時,會發生 change 事件--> $(function () { // change 值發生改變 $("#txt3").change(function () { alert("txt3值發生了變化") $(this).css("background", "red") }) }) //------------------------------------------------------------------ //<!--當圖片載入出錯的時候發生error事件 比如找不到圖片的地址啊,等等,反正就是沒載入片--> $(function () { // error 發生錯誤 $("img").error(function () { $("img").replaceWith("這個一個圖片") //用"這個一個圖片" 的文字來替換載入出錯的圖片 }) }) //------------------------------------------------------------------ $(document).mousemove(function (e) { //pageX,pageY 滑鼠的座標 $("span").text(e.pageX + ", " + e.pageY); }); </script></head><body><p>當滑鼠【按下】的時候觸發mousedown事件</p><input type="button" value="0" id="btn1"/><br/><br/><hr/><p>當滑鼠彈起的時候觸發mouseup事件</p><input type="button" value="0" id="btn2"/><br/><br/><hr/><p>當鍵盤按下的時候觸發keydown事件</p><input type="button" value="0" id="btn3"/><br/><br/><hr/><p>當鍵盤按下的時候觸發keypress事件</p><input type="button" value="0" id="btn4"/><br/><br/><hr/><p>當鍵盤彈起的時候觸發keyup事件</p><input type="button" value="0" id="btn5"/><br/><br/><hr/><p>當控制項獲得焦點的時候</p><input type="text" value="0" id="txt1"/><br/><br/><hr/><p>當控制項失去焦點的時候</p><input type="text" value="0" id="txt2"/><br/><br/><hr/><p>當元素的值發生改變時,會發生 change 事件。</p><input type="text" id="txt3"/><br/><br/><hr/><p>當元素的值發生改變時,會發生 change 事件。</p><br/><br/><hr/><p>找不到圖片地址,圖片就不能正常載入,圖片載入錯誤就會觸發orrer事件</p><img src=""/><br/><br/><hr/><p>span標籤用來顯示滑鼠的橫縱座標的值</p><span></span></body></html>
jQuery為何在mousedown與mouseup事件(中間有滑鼠位置改變的move事件)中擷取的滑鼠座標始終是一樣的?
這句話應該是這樣說:jquery 裡的mouseup事件 和js中的onmouseup 事件是完全一樣的 也就是說jquery中只有mouseup
jQuery 響應mousedown事件包括邊距,邊框,填充?
你自己試一下不就知道了嘛。把邊框和內外邊距都設為100,這樣容易測試。
#foo { background: #f00; width: 100px; height: 100px; border: 100px solid #00f; padding: 100px; margin: 100px;}
<div id="foo">foo</div>
$("#foo").on("mousedown mouseover mouseup", function() { alert("triggered");});
測試結果為:除了外邊距(margin)其它都會響應。