html 移动端关于长按图片弹出保存问题
在做html5項目的時候有個需求是要拖動一個圖片,但是又不要用戶長時間按著彈出保存框。首先想到的就是在點圖片的時候阻止默認事件的發生:
js停止冒泡·
function myfn(e){
window.event? window.event.cancelBubble = true : e.stopPropagation(); }
js阻止默認行為
防止冒泡
w3c的方法是e.stopPropagation(),IE則是使用e.cancelBubble = true·
stopPropagation也是事件對象(Event)的一個方法,作用是阻止目標元素的冒泡事件,但是會不阻止默認行為。什么是冒泡事件?如在一個按鈕是綁定一個”click”事件,那么”click”事件會依次在它的父級元素中被觸發 。stopPropagation就是阻止目標元素的事件冒泡到父級元素。
阻止默認行為
w3c的方法是e.preventDefault(),IE則是使用e.returnValue = false;·
preventDefault它是事件對象(Event)的一個方法,作用是取消一個目標元素的默認行為。既然是說默認行為,當然是元素必須有默認行為才能被取消,如果元素本身就沒有默認行為,調用當然就無效了。什么元素有默認行為呢?如鏈接<a>,提交按鈕<input type=”submit”>等。當Event 對象的 cancelable為false時,表示沒有默認行為,這時即使有默認行為,調用preventDefault也是不會起作用的。
還有一個比較強悍的return false
javascript的return false只會阻止默認行為,而是用jquery的話則既阻止默認行為又防止對象冒泡。
話說回來在項目中無論使用哪種方法動達不到效果;沒辦法該頁面結構,吧img外面套個div,在img上阻止默認事件,拖動div動從而實現拖動圖片的目的。但是在阻止圖片默認事件時還是阻止不了,查資料找到了? -webkit-touch-callout:none;即為禁用長按頁面時的彈出菜單但是用在項目中一點用沒有。于是接著找終于找到了pointer-events: none;點擊穿透,這里有一篇博友寫的介紹http://www.cnblogs.com/92cz/p/5787693.html ?我就不再詳細說了,最后沒用js就把問題解決了太高興啦,本項目還有另一種解法就是把圖片弄成背景圖,但是項目已經在測試了 只能用比較簡單,保證效果的方法。
?
轉載于:https://www.cnblogs.com/wangmaoling/p/6408003.html
總結
以上是生活随笔為你收集整理的html 移动端关于长按图片弹出保存问题的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Linux下统计局域网流量
- 下一篇: linux下in命令