[{"data":1,"prerenderedAt":366},["ShallowReactive",2],{"blog-\u002Fblog\u002Fjavascript_event_2":3},{"id":4,"title":5,"body":6,"category":353,"cover":354,"csdn":354,"date":355,"description":5,"draft":356,"extension":357,"meta":358,"navigation":359,"path":360,"seo":361,"stem":362,"tags":363,"updated":354,"__hash__":365},"blog\u002Fblog\u002Fjavascript_event_2.md","JavaScript 事件 2",{"type":7,"value":8,"toc":347},"minimark",[9,13,29,280,283,297,300,323,326,343],[10,11,12],"h2",{"id":12},"鼠标事件",[14,15,16,20,23,26],"ul",{},[17,18,19],"li",{},"click、mousedown、mousemove、mouseup、contextmenu、\nmouseover、mouseout、mouseenter、mouseleave \u002F\u002F 都没有驼峰",[17,21,22],{},"用button来区分鼠标的按键。 \u002F\u002F 扫雷 只有可以mouseup mousedown\n\u002F\u002F e.button = 0\u002F1\u002F2",[17,24,25],{},"DOM3标准规定：click时间只能监听左键，只能通过mouseup mousedown来判断鼠标键",[17,27,28],{},"如何解决 mousedown 和 click 的冲突。",[30,31,36],"pre",{"className":32,"code":33,"language":34,"meta":35,"style":35},"language-javascript shiki shiki-themes github-dark","var firstTime = 0;\nvar lastTime = 0;\nvar key = false;\ndocument.onmousedown = function () {\n  firstTime = new Date().getTime();\n};\ndocument.onmouseup = function () {\n  lastTime = new Date().getTime();\n  if (lastTime - firstTime \u003C 300) {\n    key = true;\n  }\n};\ndocument.onclick = function () {\n  if (key) {\n    console.log(\"click\");\n    key = false;\n  }\n};\n","javascript","",[37,38,39,62,76,91,110,133,139,153,171,194,207,213,218,232,240,259,270,275],"code",{"__ignoreMap":35},[40,41,44,48,52,55,59],"span",{"class":42,"line":43},"line",1,[40,45,47],{"class":46},"snl16","var",[40,49,51],{"class":50},"s95oV"," firstTime ",[40,53,54],{"class":46},"=",[40,56,58],{"class":57},"sDLfK"," 0",[40,60,61],{"class":50},";\n",[40,63,65,67,70,72,74],{"class":42,"line":64},2,[40,66,47],{"class":46},[40,68,69],{"class":50}," lastTime ",[40,71,54],{"class":46},[40,73,58],{"class":57},[40,75,61],{"class":50},[40,77,79,81,84,86,89],{"class":42,"line":78},3,[40,80,47],{"class":46},[40,82,83],{"class":50}," key ",[40,85,54],{"class":46},[40,87,88],{"class":57}," false",[40,90,61],{"class":50},[40,92,94,97,101,104,107],{"class":42,"line":93},4,[40,95,96],{"class":50},"document.",[40,98,100],{"class":99},"svObZ","onmousedown",[40,102,103],{"class":46}," =",[40,105,106],{"class":46}," function",[40,108,109],{"class":50}," () {\n",[40,111,113,116,118,121,124,127,130],{"class":42,"line":112},5,[40,114,115],{"class":50},"  firstTime ",[40,117,54],{"class":46},[40,119,120],{"class":46}," new",[40,122,123],{"class":99}," Date",[40,125,126],{"class":50},"().",[40,128,129],{"class":99},"getTime",[40,131,132],{"class":50},"();\n",[40,134,136],{"class":42,"line":135},6,[40,137,138],{"class":50},"};\n",[40,140,142,144,147,149,151],{"class":42,"line":141},7,[40,143,96],{"class":50},[40,145,146],{"class":99},"onmouseup",[40,148,103],{"class":46},[40,150,106],{"class":46},[40,152,109],{"class":50},[40,154,156,159,161,163,165,167,169],{"class":42,"line":155},8,[40,157,158],{"class":50},"  lastTime ",[40,160,54],{"class":46},[40,162,120],{"class":46},[40,164,123],{"class":99},[40,166,126],{"class":50},[40,168,129],{"class":99},[40,170,132],{"class":50},[40,172,174,177,180,183,185,188,191],{"class":42,"line":173},9,[40,175,176],{"class":46},"  if",[40,178,179],{"class":50}," (lastTime ",[40,181,182],{"class":46},"-",[40,184,51],{"class":50},[40,186,187],{"class":46},"\u003C",[40,189,190],{"class":57}," 300",[40,192,193],{"class":50},") {\n",[40,195,197,200,202,205],{"class":42,"line":196},10,[40,198,199],{"class":50},"    key ",[40,201,54],{"class":46},[40,203,204],{"class":57}," true",[40,206,61],{"class":50},[40,208,210],{"class":42,"line":209},11,[40,211,212],{"class":50},"  }\n",[40,214,216],{"class":42,"line":215},12,[40,217,138],{"class":50},[40,219,221,223,226,228,230],{"class":42,"line":220},13,[40,222,96],{"class":50},[40,224,225],{"class":99},"onclick",[40,227,103],{"class":46},[40,229,106],{"class":46},[40,231,109],{"class":50},[40,233,235,237],{"class":42,"line":234},14,[40,236,176],{"class":46},[40,238,239],{"class":50}," (key) {\n",[40,241,243,246,249,252,256],{"class":42,"line":242},15,[40,244,245],{"class":50},"    console.",[40,247,248],{"class":99},"log",[40,250,251],{"class":50},"(",[40,253,255],{"class":254},"sU2Wk","\"click\"",[40,257,258],{"class":50},");\n",[40,260,262,264,266,268],{"class":42,"line":261},16,[40,263,199],{"class":50},[40,265,54],{"class":46},[40,267,88],{"class":57},[40,269,61],{"class":50},[40,271,273],{"class":42,"line":272},17,[40,274,212],{"class":50},[40,276,278],{"class":42,"line":277},18,[40,279,138],{"class":50},[10,281,282],{"id":282},"事件练习",[14,284,285,288,291,294],{},[17,286,287],{},"拖拽应用",[17,289,290],{},"应用mousedown mousemove mouseup",[17,292,293],{},"随机移动的方块 \u002F\u002F 点不到我吧 \u002F\u002F 雪花飘落",[17,295,296],{},"mouseover",[10,298,299],{"id":299},"键盘事件",[14,301,302,305,308],{},[17,303,304],{},"keydown keypress keyup",[17,306,307],{},"keydown > keypress > keyup",[17,309,310,311],{},"keydown 和 keypress的区别\n",[14,312,313,316],{},[17,314,315],{},"keydown 可以响应任何键盘按键，keypress只能响应字符类按键",[17,317,318,319,322],{},"keypress 返回ASCII码，可以转换成响应字符。",[320,321],"br",{},"document.onkeypress = function (e) {\nconsolo.log(String.fromCharCode(e.charCode));\n}",[10,324,325],{"id":325},"事件分类",[14,327,328,331,334,337,340],{},[17,329,330],{},"文本操作事件",[17,332,333],{},"input 内容有变化触发，focus ，blur，change 聚焦和失去焦点两个状态不一触发",[17,335,336],{},"窗体操作类（window上的事件）",[17,338,339],{},"scroll(滚动条滚动 事件触发) load(慢，所有结构渲染完毕后 触发)",[17,341,342],{},"小练习：fixed定位js兼容版",[344,345,346],"style",{},"html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":35,"searchDepth":64,"depth":64,"links":348},[349,350,351,352],{"id":12,"depth":64,"text":12},{"id":282,"depth":64,"text":282},{"id":299,"depth":64,"text":299},{"id":325,"depth":64,"text":325},"前端",null,"2020-05-10",false,"md",{},true,"\u002Fblog\u002Fjavascript_event_2",{"title":5,"description":5},"blog\u002Fjavascript_event_2",[364],"JavaScript","PlVtYkCJdujJgJK93M-LaJ1ZJ4ij8CEXs0jbKqDyLEQ",1780076048557]