問題一：給圖片加上鏈接后，在拖動的時候總是跳到其他頁面

問題根源主要是不能判斷是點擊還是拖動，手機事件一般順序是 touchstart-》mousedown-》mousemove-》touchmove-》mouseup-》touchend-》click，根據不同手機可能會有不同。觸屏手機的事件一般都用 touchstart -》 touchmove -》 touchend -》 click，click事件是最后執行的，當我們有touchstart，touchmove，touchend處理完后，如果不進行return或取消默認就會觸發click事件，這樣網頁就跳走了，解決辦法是記錄touchstart的坐標點和touchmove的坐標點，根據兩個坐標點算出觸點是否移動過，其中值得關注的是事件的Event參數，觸屏一般是 event.touches，event.targetTouches，event.changedTouches。我在測試當中發現者三個參數的值時一樣的，不過值得注意的是touchend事件不會得到觸點坐標（也或許是設備問題），在移動的時候touchmove會不斷出發，有時候touchmove會不觸發，其中就是瀏覽器自帶一下功能把觸點（或鼠標）脫離了選中的元素，比如上時間按住會出現菜單，（pc上圖片就會生成一個可以拖動的縮略圖），這樣就要在touchstart（mousedown）的時候先 event.preventDefault();取消默認。

問題二：網頁中的上下滾動條不能在拖動圖片的時候滾動

相信這個問題只要制作過得都會遇到，其實主要是在移動（touchmove，mousemove）的時候取消了默認事件event.preventDefault(),在這里我們需要做的是，是否移動獲得觸點和開始的觸點是否一致，如果一致就直接返回，還要算出是移動的x軸多一點還是y軸移動的多一點，這樣我們就可以做左右滑動的時候取消默認，在上學的時候不取消；

問題三： 并且不能兼容pc機器上的拖動

這是因為在綁定事件的時候不能完全考慮事件名稱是touchstart還是mousedown ，從網上搜了一下，感覺做的不做，就直接抄過來了

大概是這個意思，根據設備不同綁定不同的事件

其實還碰到了很多的問題，就不一一說明了

不多說了，直接把代碼貼出來了，如果有什么不太好的地方，還請多多包含和提出意見

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

wap圖片滾動特效無css3元素純js腳本編寫_javascript技巧

wap圖片滾動特效無css3元素純js腳本編寫_javascript技巧:手機圖片滑動切換，網上有很多這樣的例子，但都借助于其他組件，讓代碼混亂的不行；還有就是用到css3里的 transform：translate（x,y）;移動元素,不過發現在不支持css3的設備上馬上完蛋了，所以下定決心自己做一個，誰知出現了很多的問題，其中最重要的是給圖

推薦度：

點擊下載本文 文檔為doc格式