鍢夸紮璁★紒浣犳槸涓嶆槸姝ｅ湪涓虹Щ鍔ㄧ椤甸潰閲岄偅浜涘姩鎬佺敓鎴愮殑鎸夐挳鍙戞剚锛熸槑鏄庣敤$(".btn").click()缁戝畾浜嗕簨浠讹紝缁撴灉鏂板姞杞界殑鎸夐挳鐐逛笂鍘诲儚鍧楃煶澶存病鍙嶅簲锛熷埆鎬ョ潃鐮告墜鏈猴紒浠婂ぉ鍜变滑灏辨捀璧疯瀛愶紝鎶婅繖浜嬪効鏁村緱鏄庢槑鐧界櫧锛?/p>

锛堢獊鐒舵媿澶ц吙锛夊浜嗭紒涓婂懆杩樻湁涓厔寮熼棶鎴戯細"涓哄暐鍦ㄥ畨鍗撴満涓婇暱鎸夊浘鐗囨€昏Е鍙戜笉浜嗗垹闄や簨浠讹紵"鈥斺€旇繖涓嶅氨鏄吀鍨嬬殑浜嬩欢濮旀墭娌＄帺杞槢锛?/p>

涓€銆侌煍ュ厛鎼炴噦绉诲姩绔殑鐗规畩鑴炬皵

绉诲姩绔拰PC绔渶澶х殑鍖哄埆灏辨槸鈥斺€旇Е鎺э紒寰堝鏂版墜涓嶇煡閬擄紝鈥?strong>鈥媍lick浜嬩欢鍦ㄧЩ鍔ㄧ浼氭湁300ms寤惰繜鈥?/strong>鈥嬶紙灏卞儚缃戦€熷崱椤块偅绉嶆劅瑙夛級銆傛墍浠ュ挶浠緱鐢╰ouch绯诲垪浜嬩欢锛?/p>

javascript澶嶅埗
// 浼犵粺鍐欐硶锛堟湁寤惰繜锛?/span>
$(".delete-btn").click(function(){...})

// 绉诲姩绔纭Э鍔?/span>
$("#imageContainer").on('touchstart', '.delete-btn', function(){
    vibrate(50) // 鎵嬫満闇囧姩鍙嶉
    showDeleteConfirm() // 鏄剧ず纭寮圭獥
})

杩欓噷鏈変釜鍧戣娉ㄦ剰锛歩OS绯荤粺閲岄暱鎸夐粯璁や細瑙﹀彂鍥剧墖淇濆瓨鍔熻兘锛屽緱鐢ㄢ€?strong>鈥媝reventDefault()鈥?/strong>鈥嬫嫤涓嬫潵锛?/p>

javascript澶嶅埗
$("#gallery").on('touchstart', '.photo', function(e){
    e.preventDefault() // 鎵撴柇榛樿琛屼负
    // 寮€濮嬭鏃堕暱鎸夋搷浣?..
})

浜屻€侌煋卞疄鎴橈細鐢靛晢鍟嗗搧瑙勬牸閫夋嫨鍣?/h3>

鍋囪鍜变滑瑕佸仛涓姩鎬佽鏍奸€夋嫨鐨勭粍浠讹紝鐢ㄦ埛鐐瑰嚮涓嶅悓瑙勬牸寮瑰嚭瀵瑰簲鎻愮ず銆傛櫘閫氬啓娉曠粷瀵逛細缈昏溅锛?/p>

javascript澶嶅埗
// 閿欒绀鸿寖 鉂?/span>
$(".spec-item").on('click', function(){
    // 鍔ㄦ€佸姞杞界殑鏂拌鏍兼牴鏈偣涓嶅姩锛?/span>
})

姝ｇ‘鎿嶄綔鍒嗕笁姝ヨ蛋锛?/p>

1. 鈥?strong>鈥嬫壘鍑嗗浐瀹氱埗瀹瑰櫒鈥?/strong>鈥嬶紙姣斿瑙勬牸鍖哄煙鏈€澶栧眰div锛?/li>
2. 鈥?strong>鈥嬬敤on()鏂规硶寤虹珛濮旀墭鍏崇郴鈥?/strong>鈥?/li>
3. 鈥?strong>鈥嬪鐞嗚Е鎽稿弽棣堢殑瑙嗚鏁堟灉鈥?/strong>鈥?/li>

javascript澶嶅埗
// 鉁?姝ｇ‘浠ｇ爜妯℃澘
$("#specWrapper").on('tap', '.spec-item', function(){
    $(this)
        .addClass('active') // 娣诲姞閫変腑鐘舵€?/span>
        .siblings().removeClass('active')
    
    // 鏄剧ず瀵瑰簲鎻愮ず锛堣繖閲岀敤鍒颁簡鏁版嵁灞炴€э級
    const tip = $(this).data('tip')
    $("#specTip").text(tip).fadeIn(200)
})

馃挕 鐭ヨ瘑鐐瑰崱澹充簡锛熷挶浠潵涓姣旇〃鏍硷細

鍦烘櫙	PC绔柟妗?/th>	绉诲姩绔€傞厤鏂规
鐐瑰嚮浜嬩欢	click	tap锛堥渶寮曞叆fastclick锛?/td>
婊戝姩鎿嶄綔	mousemove	touchmove + 闃叉姈
闀挎寜瑙﹀彂	榧犳爣闀挎寜	touchstart璁℃椂鍣?/td>

涓夈€侌煔€鎬ц兘浼樺寲鎬ユ晳鍖?/h3>

閬囧埌杩囬〉闈㈣秺鐢ㄨ秺鍗＄殑鎯呭喌鍚楋紵鐗瑰埆鏄腑浣庣瀹夊崜鏈猴紝浜嬩欢濮旀墭娌″鐞嗗ソ鍒嗗垎閽熷崱鎴怭PT锛?/p>

鈥?strong>鈥嬩笁澶ц嚧鍛介敊璇細鈥?/strong>鈥?/p>

1. 鍦╳indow瀵硅薄涓婁贡缁戜簨浠讹紙灏卞儚鍦ㄨ彍甯傚満瑁呴珮闊冲枃鍙級
2. 濮旀墭灞傜骇瓒呰繃3绾э紙濂芥瘮蹇€掕杞?涓厤閫佺珯锛?/li>
3. 涓嶆竻鐞嗚繃鏈熶簨浠讹紙濂芥瘮瀹堕噷鍫嗘弧搴熺焊绠憋級

鈥?strong>鈥嬩紭鍖栨妧宸у疄娴嬫湁鏁堬細鈥?/strong>鈥?/p>

javascript澶嶅埗
// 浜嬩欢鍛藉悕绌洪棿绠＄悊锛堥噸瑕侊紒锛?/span>
$("#newsList")
    .on('tap.read', '.news-item', markAsRead)
    .on('tap.share', '.news-item', showSharePanel)

// 椤甸潰璺宠浆鏃惰寰楄В缁戯紒
function cleanup(){
    $("#newsList").off('tap.read tap.share')
}

鍥涖€侌煓嬭嚜闂嚜绛旂幆鑺?/h3>

鈥?strong>鈥婹锛氫负浠€涔堝崕涓烘墜鏈烘粦鍔ㄦ椂浼氳瑙﹀彂鐐瑰嚮锛熲€?/strong>鈥?br/> A锛氳繖鏄痶ouch鍜宑lick浜嬩欢鍐茬獊浜嗭紒寤鸿鐢ㄢ€?strong>鈥婬ammer.js鈥?/strong>鈥嬪簱缁熶竴鎵嬪娍锛?/p>

javascript澶嶅埗
// 寮曞叆hammer.js鍚?/span>
var hammer = new Hammer(document.getElementById('swipeArea'));
hammer.on('swipeleft', function(){
    // 澶勭悊宸︽粦鎿嶄綔
})

鈥?strong>鈥婹锛氬姩鎬佸姞杞界殑杞挱鍥炬寚绀哄櫒鐐逛笉鍔ㄦ€庝箞鍔烇紵鈥?/strong>鈥?br/> A锛氳浣忚繖涓璺細

javascript澶嶅埗
// 杞挱鍥惧鍣ㄥ鎵樹簨浠?/span>
$("#carousel").on('touchstart', '.indicator', function(){
    const index = $(this).index()
    goToSlide(index) // 璺宠浆鎸囧畾椤?/span>
    $(this).addClass('active').siblings().removeClass('active')
})

鈥?strong>鈥婹锛氬皬绫虫墜鏈洪噷浜嬩欢瑙﹀彂浣嶇疆鎬诲亸绉伙紵鈥?/strong>鈥?br/> A锛氬叓鎴愭槸viewport娌¤缃ソ锛佸姞涓婅繖涓猰eta鏍囩锛?/p>

html杩愯澶嶅埗
name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

浜斻€侌煉″皬缂栫殑绉佹埧缁忛獙

骞蹭簡8骞村墠绔殑鑰侀笩鍛婅瘔浣犱釜绉樺瘑锛氬緢澶氭斂搴溿€侀摱琛岀殑鑰佺郴缁熻繕鍦ㄧ敤jQuery锛佸幓骞寸粰鏌愬ぇ鍨嬭秴甯傛敼閫燩OS绯荤粺锛岀敤浜嬩欢濮旀墭鎶婃€ц兘鎻愬崌浜?鍊嶅鈥斺€斿師鏈垏鎹㈠晢鍝佸垎绫昏2绉掞紝浼樺寲鍚庣洿鎺ュ帇鍒?00姣锛?/p>

鏁版嵁涓嶄細璇磋皫锛?/p>

• 浜嬩欢濮旀墭鍑忓皯80%鐨勫唴瀛樺崰鐢?/li>
• 鍔ㄦ€佸厓绱犲搷搴旈€熷害鎻愬崌3-5鍊?/li>
• 浠ｇ爜缁存姢鎴愭湰闄嶄綆60%

锛堢獊鐒跺帇浣庡０闊筹級鏈€鍚庤涓涓氶粦璇濓細绉诲姩绔紑鍙戝埆姝荤鍘熺敓浜嬩欢锛岃瘯璇曗€?strong>鈥媄epto.js鈥?/strong>鈥嬭繖涓交閲忓簱锛孉PI鍜宩Query涓€妯′竴鏍凤紝鎵撳寘鍚庝綋绉彧鏈?KB锛佺壒鍒槸鍋欻5娲诲姩椤碉紝閭ｅ彨涓€涓笣婊憕